在 IE 中添加/删除选择列表选项

Question

我有 2 个选择列表，第一个中的选定项目控制第二个中显示的内容。条件列表最初会加载所有可用选项，然后根据类别列表中选择的内容进行过滤。

我的问题是，如果我过滤不止一次，每次更改类别选择选项时，我的初始条件变量都会减少，最终条件列表中的数据不完整。

例如，我按类别 1 过滤以查看条件列表中属于类别 1 的所有条件。如果我然后按类别 2 进行过滤，它只会在过滤之前将当前三个类别 1 条件分配给条件变量，结果我最终没有条件。

如何在每次更改类别时按完整的初始条件列表进行过滤？

 $(document).on('change', '#category', function (e) {
    
        var categories = $("#category option"); 
        var conditions = $("#condition option"); 

        var $selectedIndex = $(this).find('option:selected').data('position');

        $("#condition").empty();
        conditions.each(function (index, value) {
            $value = $(value);
            if ($value.hasClass('cat-' + $selectedIndex)) {
                $("#condition").append($value); 
            }
        });
    
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="category">
  <option class="cat-1">Category 1</option>
  <option class="cat-2">Category 2</option>
  <option class="cat-3">Category 3 </option>
</select>

<select id="condition">
  <option class="cat-1">Category 1-A</option>
  <option class="cat-1">Category 1-B</option>
  <option class="cat-1">Category 1-C</option>
  <option class="cat-2">Category 2-A</option>
  <option class="cat-2">Category 2-B</option>
  <option class="cat-2">Category 2-C</option>
  <option class="cat-3">Category 3-A</option>
  <option class="cat-3">Category 3-B</option>
  <option class="cat-3">Category 3-C</option>
</select>

Answer 1

我尝试了您的代码，但它也无法在 chrome 中运行。您的代码有以下问题：

a) $selectedIndex 被初始化为 undefined

b) 在重新初始化之前，您正在获取原始条件选择列表并将其设为空。一旦在传递给conditions.each 方法的回调函数中发生重新初始化，这将导致条件选择中存在的所有初始选项丢失。

以下代码将为您工作：

var conditions = $("#condition option"); 
$(document).on('change', '#category', function (e) {
    $("#condition").empty();
    var selectedCategory = $(this).children("option:selected").val();
    conditions.each(function (index, value) {
        $value = $(value);
        if ($value.val().indexOf(selectedCategory) > -1) {
            $("#condition").append($value); 
        }
    });
    $("#condition").val($("#condition option:first").val());
});