javascript – 当选择其他选择下拉菜单上的选项时,jQuery可以从一个选择下拉列表中显示/隐藏选项

我需要在一个选择下拉菜单上显示/隐藏选项,具体取决于另一个选择下拉选项.

下面的代码显示了我要实现的目标.

如果’column_select’选择菜单选项设置为’1列’,那么’layout_select’选择菜单只能显示’none’选项.

如果“column_select”选择菜单选项设置为“2列”,则“layout_select”选择菜单只能显示“布局1”和“布局2”选项.

如果“column_select”选择菜单选项设置为“3列”,则“layout_select”选择菜单只能显示“布局3”,“布局4”和“布局5”选项.

<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>

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

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

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

到目前为止,我所尝试的一切都失败了…我是jQuery的新手.如果任何人可以请帮助它将不胜感激.谢谢!

最佳答案
尝试 –

$("#column_select").change(function () {
    $("#layout_select").children('option').hide();
    $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})  

如果你要使用这个解决方案,你需要隐藏所有的元素,除了你的document.ready函数中的“none”值之外.

$(document).ready(function() {
    $("#layout_select").children('option:gt(0)').hide();
    $("#column_select").change(function() {
        $("#layout_select").children('option').hide();
        $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
    })
})

演示 – http://jsfiddle.net/Mxkfr/2

编辑

我可能已经有了这个,但这里还有一个例子,使用原始选择列表选项的缓存来确保’layout_select’列表完全重置/清除(包括’none’选项) column_select’列表已更改 –

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})

演示 – http://jsfiddle.net/N7Xpb/1/

转载注明原文:javascript – 当选择其他选择下拉菜单上的选项时,jQuery可以从一个选择下拉列表中显示/隐藏选项 - 代码日志