根据每个选项的值或ID过滤选择框

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

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

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

这是HTML

 ---Filter--- show only 1 show only 2 show only 3  

 homeware  product 1 product 2 product 3  
 electronics  product 1 product 2 product 3  
 kitchen  product 1 product 2 product 3  

很想知道如何使用Jquery来实现上述目标

Answer 1

您可以使用contains选择器"option[value*='" + sel + "']"来过滤掉值并隐藏。 要恢复，请检查所选值是否存在（在您的情况下是空白）并同时显示重置所有选择的值。

示例 ：

 $("#selectlist").on("change", function() { var sel = $(this).val(), $ddl = $("#select1, #select2, #select3"); if (!sel) { // if there is no value means first option is selected $ddl.find("option").show(); $ddl.val(''); // show all options and reset the value } else { $ddl.find("option").hide(); // hide all options // show only those options which contain the selected value, // set the selected property to true for the only remaining ones $ddl.find("option[value*='" + sel + "']").show().prop('selected', true); } }); 

   ---Filter--- show only 1 show only 2 show only 3  

 homeware  product 1 product 2 product 3  
 electronics  product 1 product 2 product 3  
 kitchen  product 1 product 2 product 3  

Answer 2

以下是步骤：

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

工作演示