当选择其他选择下拉列表中的选项时,jQuery显示/隐藏一个选择下拉列表中的选项

Question

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

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

如果'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的新手.如果有人可以请求帮助,将不胜感激.谢谢!

Answer 1

试试 -

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

Answer 2

怎么样:

(更新)

$("#column_select").change(function () {
    $("#layout_select")
        .find("option")
        .show()
        .not("option[value*='" + this.value + "']").hide();

    $("#layout_select").val(
        $("#layout_select").find("option:visible:first").val());

}).change();

(假设第三个option应该有一个值col3)

示例: http ://jsfiddle.net/cL2tt/

笔记:

• 使用该.change()事件定义在select#column_select更改值时执行的事件处理程序.
• .show()所有人都option在第二个select.
• .hide()所有options在第二个中,select其中value不包含value所选选项select#column_select,使用属性包含选择器.

Answer 3

并在2016年.....我这样做（它在所有浏览器中均有效，并且不会创建“非法” html）。

对于显示/隐藏不同值的下拉选择，将该值添加为数据属性。

<select id="animal">
    <option value="1" selected="selected">Dog</option>
    <option value="2">Cat</option>
</select>
<select id="name">
    <option value=""></option>
    <option value="1" data-attribute="1">Rover</option>
    <option value="2" selected="selected" data-attribute="1">Lassie</option>
    <option value="3" data-attribute="1">Spot</option>
    <option value="4" data-attribute="2">Tiger</option>
    <option value="5" data-attribute="2">Fluffy</option>
</select>

然后在您的jQuery中向第一个下拉列表中添加一个change事件，以选择第二个下拉列表。

$("#animal").change( function() {
    filterSelectOptions($("#name"), "data-attribute", $(this).val());
});

魔术部分是这个小jQuery实用程序。

function filterSelectOptions(selectElement, attributeName, attributeValue) {
    if (selectElement.data("currentFilter") != attributeValue) {
        selectElement.data("currentFilter", attributeValue);
        var originalHTML = selectElement.data("originalHTML");
        if (originalHTML)
            selectElement.html(originalHTML)
        else {
            var clone = selectElement.clone();
            clone.children("option[selected]").removeAttr("selected");
            selectElement.data("originalHTML", clone.html());
        }
        if (attributeValue) {
            selectElement.children("option:not([" + attributeName + "='" + attributeValue + "'],:not([" + attributeName + "]))").remove();
        }
    }
}

这个小宝石跟踪当前的过滤器，如果不同，它将还原原始选择（所有项目），然后删除过滤的项目。如果过滤器项目为空，我们将看到所有项目。