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

Question

我有两个选择列表，从第一个列表中选择一个选项决定了第二个列表中可用的选项。这在Chrome中工作得很好，但是IE在更改第一个选择时隐藏适当的选项时遇到了麻烦。正在应用hidden类，但选项仍然可见。你知道如何修改它才能在IE中工作吗？

Fiddle

​

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

.hidden {
  display: none !important;
}

#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>

​

Answer 1

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

​

// 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>

​