在jQuery中隱藏IE中的選擇選項

Question

我有2個選擇列表，從第一個選擇一個選項決定了第二個選項。這在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

可以selectoption S保存到變量，然後取出並重新進行添加其中任何一個你想要的。

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