Javascript 根据每个选项的值或id筛选选择框

我想使用jquery过滤表单中的所有选择框

例如：在第一个选择框中，如果我选择“仅显示1”，我想过滤所有选择元素中的所有选择选项，以隐藏值不包含“\u 1”的任何选项。只应显示带有“_1”的产品值

如果选择了选项“---Filter--”，则所有选择框的默认值应为空

这是HTML

---滤器---
只显示1个
只显示2个
只显示3个



家用电器
产品1
产品2
产品3


电子学
产品1
产品2
产品3


厨房
产品1
产品2
产品3

想知道如何使用Jquery实现上述功能，请参见以下步骤：

1） 获取子选择元素选项需要根据主选择进行切换的元素

2） 在主选择上写入更改事件

3） 隐藏所有选项并显示其值包含主选择选项选定值的选项

4） 在附加事件后触发更改，以确保默认情况下隐藏所有其他选择元素

var otherselectoption = $('#select1,#select2,#select3').find('option');
$('#selectlist').change(function(){
 var selected = $(this).val();
 otherselectoption.hide().filter(function(){
    return ($(this).attr('value').indexOf(selected) > -1 || $(this).attr('value') == "")
}).show();
}).change();

---

您可以使用

contains

选择器

“选项[value*='“+sel+']”“

过滤出值并隐藏。若要恢复，请检查所选值是否存在（在您的情况下为空），并同时显示重置所有选择上的值

示例：

$（“#选择列表”）。关于（“更改”，函数（）{
var sel=$（this）.val（），
$ddl=$（“#选择1，#选择2，#选择3”）；
如果（！sel）{//如果没有值，则表示选择了第一个选项
$ddl.find（“option”）.show（）；$ddl.val（“”）；//显示所有选项并重置值
} 
否则{
$ddl.find（“option”）.hide（）；//隐藏所有选项
//仅显示包含选定值的选项，
//仅将其余属性的选定属性设置为true
$ddl.find（“选项[value*=”“+sel+””]）.show（）.prop（'selected'，true）；
}
});

---滤器---
只显示1个
只显示2个
只显示3个



家用电器
产品1
产品2
产品3


电子学
产品1
产品2
产品3


厨房
产品1
产品2
产品3
thx用于解决方案。过滤正在工作，但当我选择“---Filter--”时，它没有将所有选择框的默认选项设置为空白。你的解决方案中能考虑到这一点吗？当然……让我来修理小提琴。如果我不清楚，对不起。我的意思是将所有选择框的默认值设置为空，但它仍应具有所有选项。您的最新解决方案将删除所有选项。再次，如果我不清楚，我很抱歉。我注意到你的代码在IE中不起作用-浏览器抱怨调试器-你能检查它并进行任何必要的调整吗？谢谢！这很有效。尽管如此，我还是希望选择框中的默认值始终为空。您的解决方案将自动填充。。将其留空以允许用户选择是否是一种快速修复方法？@user3436467:当然。只需删除结尾处的
.prop（'selected'，true）
部分。知道为什么该代码不能在IE浏览器中运行吗？在chrome和firefox中工作。@user3436467：很好！补充到答案中。IE不允许在
选项上
隐藏
。解决方法是使用
.prop（'disabled'，true）
它有帮助，但在IE中隐藏的选项显示为灰色。。我们对此无能为力？