JQuery .toggle() ne fonctionne pas sur IE9 avec les options de sélection

Question

J'ai un léger problème. J'ai deux listes déroulantes dépendantes. Si vous sélectionnez d'abord sth, puis à la seconde, vous devriez voir les options filtrées. Tout fonctionne bien sur FF mais quand je l'essaye sur IE9 alors toggle arrête de fonctionner. J'ai toutes les options visibles. Mes codes:

HH1: 
<select name="color"> 
    <option value="1">blue</option> 
    <option value="2">red</option> 
</select> 

HH2: 
<select name="size"> 
    <option value="0" data-shown="0" data-link="">Please select</option> 
    <option value="1" data-shown="1" data-link="link1">L</option> 
    <option value="2" data-shown="1" data-link="link2">M</option> 
    <option value="3" data-shown="2" data-link="link3">XL</option> 
    <option value="23" data-shown="2" data-link="link4">XM</option> 
</select> 

Mon code jQuery:

$('select[name="color"]').change(function() { 
    var number = parseInt($('option:selected', this).attr('value')); 
    $('select[name="size"] option').each(function(){  
     if (parseInt($(this).attr('data-shown')) != 0){    
      $(this).toggle(false);   
      $(this).toggle(parseInt($(this).attr('data-shown')) == number); 
     }else { 
      $(this).attr('selected', true); 
     }}); 
}).trigger('change'); 

Si vous avez une solution s'il vous plaît aider. ..... Je me demande si je devrais le mettre en document prêt script ou sth.

mon exemple: http://jsfiddle.net/KD7Q5/1/

Answer 1

La réponse de ShankarSangoli est bonne. J'ajouterai que si vous voulez que les options disparaissent, vous pouvez garder un select caché et en copier les options dans le visible.

Démo: http://jsfiddle.net/XjShS/

Dans cet exemple, j'ai un select nommé hsize (taille cachée ... ne choisissez pas les noms moche comme moi). Cela a toutes les options. Lorsque le gestionnaire change se déclenche, il efface les options de la sélection size, puis ajoute les options appropriées de hsize.

Answer 2

IE ne supporte pas cacher un élément d'option. Si la désactivation fonctionne pour vous, je vous suggère de le faire.

Démo Travailler avec l'option de désactiver - http://jsfiddle.net/KD7Q5/3/

Answer 3

Vous pourriez être mieux avec repeupler dynamiquement l'élément size chaque fois que le choix est fait pour l'élément color. C'est une solution multi-navigateur pour votre "problème" et vous n'aurez pas à faire face aux options de masquage.