Ausblenden von Optionen in IE mit jQuery

Question

Ich habe 2 Auswahllisten, die Auswahl einer Option aus dem ersten bestimmt die verfügbaren Optionen in der zweiten. Dies funktioniert in Chrome sehr gut, aber IE hat Probleme beim Ausblenden der entsprechenden Optionen bei Änderung der ersten Auswahl. Die Klasse hidden wird angewendet, die Optionen sind jedoch weiterhin sichtbar. Irgendeine Idee, wie man das ändert, um im IE zu arbeiten?

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

Sie können selectoption s Variable speichern, dann entfernen und readd jeder von ihnen gewünscht wird.

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