Question

我遇到了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>

我想通过名为＆＃34; marche＆＃34;的广播中的所选值隐藏和显示选项。

我在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中不起作用？

Answer 1

<强> 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);

Answer 2

IE中options隐藏select的概念并不存在。您必须手动删除并重新添加条目，这可能会带来一些不便。

另一种解决方案是禁用元素

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

在选择中显示/隐藏选项

2 个答案: