使用jQuery隐藏IE中的选择选项

Question

我有2个选择列表，从第一个选择一个选项确定第二个选项中可用的选项。这在Chrome中运行良好，但IE在更改第一个选择时隐藏了相应的选项。正在应用hidden类，但选项仍然可见。知道如何修改它在IE中工作吗？

Fiddle

＆＃13;

＆＃13;

$(document).on('change', '#category', function(e) {
  if ($(this).prop('selectedIndex') == 0) {
    $('#condition option').addClass('hidden');
    $('#condition .cat-1').removeClass('hidden');
  } else if ($(this).prop('selectedIndex') == 1) {
    $('#condition option').addClass('hidden');
    $('#condition .cat-2').removeClass('hidden');
  }
});

＆＃13;

.hidden {
  display: none !important;
}

#category {
  height: 40px;
}

#condition {
  height: 110px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="category" size="2">
  <option class="cat-1">Group 1</option>
  <option class="cat-2">Group 2</option>
</select>

<select id="condition" size="2">
  <option class="cat-1">Item from group 1</option>
  <option class="cat-1">Item from group 1</option>
  <option class="cat-1">Item from group 1</option>
  <option class="cat-2">Item from group 2</option>
  <option class="cat-2">Item from group 2</option>
  <option class="cat-2">Item from group 2</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将select option保存到变量中，然后删除并读取您想要的任何内容。

// saving options
var options = $("#condition option");

$(document).on('change', '#category', function(e) {
  if ($(this).prop('selectedIndex') == 0) {
    // deleteing all options
    $("#condition").empty();
    // adding options only of class .cat-1
    options.filter(".cat-1").each(function() {
      $("#condition").append($(this));
    });
  } else if ($(this).prop('selectedIndex') == 1) {
    // deleteing all options
    $("#condition").empty();
    // adding options only of class .cat-2
    options.filter(".cat-2").each(function() {
      $("#condition").append($(this));
    });
  }
});

#category {
  height: 40px;
}

#condition {
  height: 110px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="category" size="2">
  <option class="cat-1">Group 1</option>
  <option class="cat-2">Group 2</option>
</select>

<select id="condition" size="2">
  <option class="cat-1">Item from group 1</option>
  <option class="cat-1">Item from group 1</option>
  <option class="cat-1">Item from group 1</option>
  <option class="cat-2">Item from group 2</option>
  <option class="cat-2">Item from group 2</option>
  <option class="cat-2">Item from group 2</option>
</select>