jquery - Show/Hide options in a select -
i got problem ie.
got input , select :
<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>
i want hide , show options selected value in radio named "marche".
i made in 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(); }
it works in firefox, not in ie. there knows why doesn't work in ie ?
the notion of hidden options
in select
doesn't exist in ie. have manually remove , re-add entries, may of inconvenience.
another solution disable elements
$("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); }
Comments
Post a Comment