在选择中显示/隐藏选项答案

【问题标题】：Show/Hide options in a select在选择中显示/隐藏选项
【发布时间】：2014-05-28 13:18:42
【问题描述】：

我遇到了 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 中不起作用？

【问题讨论】：

什么版本的jQuery和IE？ IE报什么错误？
那是 IE8 和 jquery 1.11.0
IE中没有noo错误

标签： jquery select hide show option

【解决方案1】：

在select 中隐藏options 的概念在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);
    }

DEMO

【讨论】：

谢谢阿迪亚。这是一个解决方案，但我不能使用它，因为我确实不需要显示未选择的值。
我认为唯一的方法是使用临时区域，将所有值保存在其中。然后使用选定的值构造一个新的选择。
最简单的解决方案可能是完全隐藏和显示三个不同的下拉菜单，具体取决于选择的选项。

【解决方案2】：

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

【讨论】：