Показване / скриване на опции в опцията select - jquery, select, hide, show, опция

Имам проблем с IE.

Получих този вход и изберете:

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

Искам да скрия и покажа опциите по избраната стойност в радиото, наречено "marche".

Направих това в 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();
}

Работи във Firefox, но не и в IE. Има ли някой, който знае защо не работи в IE?

Отговори:

Понятието за скрито options в select не съществува в IE. Трябва ръчно да премахнете и отново да добавите записите, което може да е малко неудобство.

Друго решение би било също да се деактивират елементите

 $("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);
}

ДЕМОНСТРАЦИЯ

JSFIDDLE DEMO

Трябва да изберете първата опция, която съответства на избрания радио бутон

$("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);