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

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

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

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

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

如果’column_select’选择菜单选项设置为’3列’，则’layout_select’选择菜单必须仅显示’布局3’，’布局4’和’布局5’选项。

 1 column 2 column 3 column    none  layout 1 layout 2  layout 3 layout 4 layout 5  

到目前为止，我所尝试的一切都失败了……我是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": "" + this.text + "" } }) $("#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()第二个select中的所有option 。
• .hide()第二个select的所有option ，其value不包含select#column_select所选选项的value ，使用包含选择器的属性 。

Answer 3

也许迟到了，但我建议

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

Answer 4

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

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

Answer 5

并在2016年…..我这样做（它适用于所有浏览器，不会创建“非法”HTML）。

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

  Dog Cat    Rover Lassie Spot Tiger Fluffy  

然后在你的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(); } } } 

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

Answer 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 (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(); }); 

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