jQuery Show /隐藏选项从一个选择下拉下降不起作用，选择其他下拉下的选项时

Question

在标题中表示，我想在选择DropDownLsit1中的给定选项时显示dropdownlist2的选项。

我尝试了几种解决方案，最后一个是： jQuery show/hide options from one select drop down, when option on other select dropdown is slected 我尝试使用，但没有成功。

代码link。

问题是：

• 在dropdownlist2 中有一些我也想显示/隐藏的 optgroup
• 第一个选项可以很好地显示/隐藏，但对于最后一个选项，显示错误（参见“6 列”）
• 不适用于 IE

我的 JS 代码

    $(document).ready(function() {
        $('#layout_select').attr('disabled', 'disabled');
        $("#column_select").change(function () {
            var colSelected = $("#column_select option:selected").val();
            var colSelectedText = $("#id_divisions option:selected").text();
            if (colSelected != 0){
                $('#layout_select').removeAttr('disabled');  
                $("#layout_select")
                .find("option")
                .show()
                .not("option[value*='" + this.value + "']").hide();

                $("#layout_select")
                .find("optgroup")
                .hide();

                $("#layout_select")
                .find("optgroup[label='" + colSelectedText + "']")
                .show();

                $("#layout_select").val(
                $("#layout_select").find("option:visible:first").val());
            }  else  {
                $('#layout_select option[value="0"]').attr("selected",true);
                $('#layout_select').attr('disabled', 'disabled');
            }
        }).change();
    });

您可以使用 html here 查看完整版本。 （我确实尝试过 chrome）

非常感谢

编辑

我终于找到了一个解决方案，也许不是很好，但它适用于 chrome、firefox 和 IE

HTML：

<select name="column_select" id="column_select">
    <option value="0">-----------------------------------</option>
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
    <option value="col4">4 column</option>
    <option value="col5">5 column</option>
    <option value="col6">6 column</option>
</select>

<select name="layout_select" id="layout_select">
    <option value="0">-----------------------------------</option>
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <optgroup label="1 column">
    <option value="col1">none</option>
    </optgroup>

    <!--Below shows when '2 column' is selected is hidden otherwise-->
     <optgroup label="2 column">
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option>
    </optgroup>

    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <optgroup label="3 column">
    <option value="col3_mss">layout 3</option>
    <option value="col3_ssm">layout 4</option>
    <option value="col3_sms">layout 5</option>
    <option value="col3_sms">layout 6</option>
    <option value="col3_sms">layout 7</option>
    <option value="col3_sms">layout 8</option>
    </optgroup>

    <optgroup label="4 column">
    <option value="col4_ms">layout 9</option> 
    <option value="col4_sm">layout 10</option>
    <option value="col4_sm">layout 11</option>
    <option value="col4_sm">layout 12</option>
    <option value="col4_sm">layout 11</option>
    <option value="col4_sm">layout 12</option>
    </optgroup>

    <optgroup label="5 column">
    <option value="col5">Test</option>
    <option value="col5">Test2</option>
    </optgroup>

    <optgroup label="6 column">
    <option value="col6_ms">layout 13</option> 
    <option value="col6_sm">layout 14</option>
    <option value="col6_sm">layout 15</option>
    </optgroup>
</select>

<select id="backup" style="display:none;"></select>

JS：

$(document).ready(function() {
    $('#layout_select').attr('disabled', 'disabled');

    $.each($('#layout_select optgroup'),function( index, value ){
        $('#backup').append(value);  
    });   

    $("#column_select").change(function () {
        $('#layout_select optgroup').remove();
        $('#layout_select option').not("option[value='0']").remove();
        var colSelected = $("#column_select option:selected").val();
        var colSelectedText = $("#column_select option:selected").text();
        if (colSelected != 0){
            $('#layout_select').removeAttr('disabled');  
            $("#backup optgroup[label*='" + colSelectedText + "']").clone().appendTo("#layout_select");                           
            $("#layout_select").val(
            $("#layout_select").find("option:visible:first").val());
        }  else  {
            $('#layout_select option[value="0"]').attr("selected",true);
            $('#layout_select').attr('disabled', 'disabled');
        }            
    }).change();
});

如果您有任何其他建议，请不要犹豫。

Answer 1

我能够进入 if 条件 (if (colSelected != 0){) 但不知何故数据组没有出现在下面的数据中。

$( 文档 ).ready(function() {

$.each($('#id_component_class optgroup'),function( index, value ){
    $('#backup').append(value);
});

$("#id_env_component").change(function () {
    $('#id_component_class optgroup').remove();
    $('#id_component_class option').not("option[value='0']").remove();
    var colSelected = $("#id_env_component option:selected").val();
    var colSelectedText = $("#id_env_component option:selected").text();
    alert(colSelectedText);
    if (colSelected != 0){
        alert("inside");
        $('#id_component_class').removeAttr('disabled');

        $("#backup optgroup[label*='" + colSelectedText + "']").clone().appendTo("#id_component_class");

        $("#id_component_class").val(
        $("#id_component_class").find("option:visible:first").val());
    }  else  {
        $('#id_component_class option[value="0"]').attr("selected",true);
        $('#id_component_class').attr('disabled', 'disabled');
    }
}).change();

});

---