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

Question

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

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

例如，我按类别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方法的回调函数中发生重新初始化，这将导致丢失条件select中存在的所有初始选项。

下面的代码将为您工作：

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());
});