Afficher / masquer les options dans une sélection - jquery, selectionner, masquer, afficher, option

J'ai un problème avec IE.

Vous avez cette entrée et sélectionnez:

<input type="radio" checked="" value="PAR" name="marche">Particulier
<input type="radio" value="PRO" name="marche">PRO/TPE
<input type="radio" value="ENT" name="marche">Entreprise

<select id="typeDeProduit" name="typeDeProduit">
<option class="PAR" value="21" style="display: block;">G9119A Mrh Gan Habitat Globale     </option>
<option class="PAR" value="22" style="display: block;">G9120A Mrh Gan Habitat Confort     </option>
<option class="PRO" value="24" style="display: none;">G6020A - RCCE </option>
<option class="PRO" value="25" style="display: none;">G6006A - Autre RC </option>
<option class="PRO" value="27" style="display: none;">G9001A - Stella (- de 10 M     engagement et/ou -de 5 étoiles) </option>
<option class="ENT" value="42" style="display: none;">G7009A - Dommages divers entreprise </option>
<option class="ENT" value="43" style="display: none;">G2004A - Individuelles entreprise </option>
<option class="PAR" value="6" style="display: block;">G4102A 2-3 roues (2 roues - Quad-Voiturette, …) </option>
</select>

Je veux masquer et afficher les options par la valeur sélectionnée dans la radio nommée "marche".

Je l'ai fait en jquery:

In jquery function :

$("input:radio[name=marche]").change(function(){
cacherTousTypesDeProduit();
rafraichirListeTypeDeProduit();
});


function cacherTousTypesDeProduit(){
$("#typeDeProduit>option").hide();
}

function rafraichirListeTypeDeProduit(){
var typeDeProduitSelectionne = $("input:radio[name=marche]:checked").val();
$("#typeDeProduit>option[class="+typeDeProduitSelectionne+"]").show();
}

Cela fonctionne dans Firefox, mais pas dans IE. Y a-t-il quelqu'un qui sait pourquoi cela ne fonctionne pas dans IE?

Réponses:

La notion de caché options dans un select n'existe pas dans IE. Vous devez supprimer et rajouter manuellement les entrées, ce qui peut être quelque peu gênant.

Une autre solution serait de désactiver également les éléments

 $("input:radio").on("change click",function(){
$("select#typeDeProduit > option").hide().prop("disabled", false);
cacherTousTypesDeProduit();
rafraichirListeTypeDeProduit();
});


function cacherTousTypesDeProduit(){
$("select#typeDeProduit > option").hide().prop("disabled", true);
$("select#typeDeProduit").val("");
}

function rafraichirListeTypeDeProduit(){
var typeDeProduitSelectionne = $("input:radio[name=marche]:checked").val();
console.log(typeDeProduitSelectionne);
$("#typeDeProduit > option[class="+typeDeProduitSelectionne+"]").hide().prop("disabled", false);
}

DEMO

JSFIDDLE DEMO

Vous devez sélectionner la première option qui correspond au bouton radio sélectionné

$("input:radio[name=marche]").change(function () {
cacherTousTypesDeProduit();
rafraichirListeTypeDeProduit();
});


function cacherTousTypesDeProduit() {
$("#typeDeProduit>option").hide();
}

function rafraichirListeTypeDeProduit() {
var typeDeProduitSelectionne = $("input:radio[name=marche]:checked").val();
//auto select the first option
$("#typeDeProduit>option[class=" + typeDeProduitSelectionne + "]").show().first().prop("selected", true);