javascript - 在 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 被初始化为未定义

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