jQuery显示/隐藏选项从一个选择下拉，当其他选择下拉列表上的选项时答案

【问题标题】：jQuery show/hide options from one select drop down, when option on other select dropdown is slectedjQuery显示/隐藏选项从一个选择下拉，当其他选择下拉列表上的选项时
【发布时间】：2011-10-08 15:50:52
【问题描述】：

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

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

如果“column_select”选择菜单选项设置为“1 列”，则“layout_select”选择菜单必须仅显示“无”选项。

如果“column_select”选择菜单选项设置为“2 列”，则“layout_select”选择菜单必须仅显示“布局 1”和“布局 2”选项。

如果“column_select”选择菜单选项设置为“3 column”，则“layout_select”选择菜单必须仅显示“layout 3”、“layout 4”和“layout 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 新手。如果有人可以请帮助，将不胜感激。谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试 -

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

如果您要使用此解决方案，则需要隐藏除 document.ready 函数中具有“无”值的元素之外的所有元素 -

$(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”列表完全重置/清除（包括“无”选项） '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/

【讨论】：

谢谢！这似乎可行，但有一个小问题....当从“column_select”中选择选项时，“layout_select”中当前选择的选项保持不变。有没有办法改变选项？
太好了，我实施了您的最新更新，并且运行良好。我遇到的一个问题是，在刷新时它没有选择正确的选项。页面刷新后，“#layout_select”将恢复为第一个选择。我想知道是否可以对您施加更多压力，告诉我如何在刷新时保持选择正确的选项？
什么情况下会刷新屏幕？是在表单发布之后吗？
工作正常 :)

【解决方案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() 所有options 在第二个select。
.hide() 第二个select 中的所有options，其value 不包含select#column_select 中所选选项的value，使用attribute contains selector。

【讨论】：

谢谢！像上面这样似乎可行，但有一个小问题。当从“column_select”中选择一个新选项时，“layout_select”中当前选择的选项保持不变。有没有办法改变选项？
为什么是find ALL -> show ALL -> not VAL，然后是hide？好像你在逻辑上过于逻辑化并且过于复杂。为什么不简单地使您想要隐藏的选项无效？

【解决方案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 中添加一个更改事件到第一个下拉选择以过滤第二个下拉列表。

$("#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();
        }
    }
}

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

【讨论】：

这太棒了。对我来说，我碰巧选择传递事件： $("#animal").change( (event) => { filterSelectOptions( $('#name'), 'data-attribute', event.currentTarget.value ); });
这是一个很好的解决方案

【解决方案4】：

可能有点晚了，但我建议

$(document).ready(function() {
    var layout_select_html = $('#layout_select').html(); //save original dropdown list

    $("#column_select").change(function () {
        var cur_column_val = $(this).val(); //save the selected value of the first dropdown
        $('#layout_select').html(layout_select_html); //set original dropdown list back
        $('#layout_select').children('option').each(function(){ //loop through options
        if($(this).val().indexOf(cur_column_val)== -1){ //do your conditional and if it should not be in the dropdown list
           $(this).remove(); //remove option from list
        }
    });
});

【讨论】：

【解决方案5】：

最初两个下拉菜单都有相同的选项，您在 firstdropdown 中选择的选项隐藏在 seconddropdown 中。“value”是唯一的自定义属性。

$(".seconddropdown option" ).each(function() {
    if(($(this).attr('value')==$(".firstdropdown  option:selected").attr('value') )){
        $(this).hide();
        $(this).siblings().show();
    }
});

【讨论】：

【解决方案6】：

// find the first select and bind a click handler
$('#column_select').bind('click', function(){
    // retrieve the selected value
    var value = $(this).val(),
        // build a regular expression that does a head-match
        expression = new RegExp('^' + value),
        // find the second select
        $select = $('#layout_select);

    // hide all children (<option>s) of the second select,
    // check each element's value agains the regular expression built from the first select's value
    // show elements that match the expression
    $select.children().hide().filter(function(){
      return !!$(this).val().match(expression);
    }).show();
});

（这远非完美，但应该能让你到达那里……）

【讨论】：