Hiding select options in IE with jQuery

Question

I have 2 select lists, picking an option from the first one determines the options available in the second. This works great in Chrome, however IE is having trouble hiding the appropriate options on change of the first select. The hidden class is being applied, but the options are still visible. Any idea how to modify this to work in 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>

Probably doesn't work in Firefox either. Hiding options is not cross browser, you have to remove or disable them — adeneo, Jul 18 '17 at 13:58

Vadim Ovchinnikov · Accepted Answer · 2017-07-18T14:41:00.777

You can save select options to variable, then remove and readd any of them you want.

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

Thanks! having trouble getting my change event to know what `options` is, getting an undefined error when it hits the filter lines — noclist, Jul 18 '17 at 14:47
@noclist You should save you `option`s on page load (not on change event) and then filter them. Does it make sense or you still have some issues with this? — Vadim Ovchinnikov, Jul 18 '17 at 14:52

Hiding select options in IE with jQuery

1 Answers1