在IE

Question

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

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

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

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

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