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，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）{），但是下面的数据中没有数据组。

$（document）.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();

}）;

当选择其他下拉列表中的选项时，来自一个选择下拉列表的jQuery显示/隐藏选项不起作用

1 个答案: