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

时间：2015-08-24 13:36:27

标签： javascript jquery

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

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

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

这是HTML 

<select id="selectlist" name="selectlist" >
    <option value="">---Filter---</option>
    <option value="1">show only 1</option>
    <option value="2">show only 2</option>
    <option value="3">show only 3</option>
</select>
<br><br>
homeware<select id="select1" name="select1">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
<br>
electronics<select id="select2" name="select2">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
    <br>
kitchen<select id="select3" name="select3">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>

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

2 个答案:

答案 0 :(得分：3)

您可以使用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);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectlist" name="selectlist" >
    <option value="">---Filter---</option>
    <option value="1">show only 1</option>
    <option value="2">show only 2</option>
    <option value="3">show only 3</option>
</select>
<br><br>
homeware<select id="select1" name="select1">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
<br>
electronics<select id="select2" name="select2">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
    <br>
kitchen<select id="select3" name="select3">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>

如果您希望将默认值保持为空白（而不是选择已过滤的选项），则只需删除最后一个.prop('selected', true)。

示例2 ：

$("#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();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectlist" name="selectlist" >
    <option value="">---Filter---</option>
    <option value="1">show only 1</option>
    <option value="2">show only 2</option>
    <option value="3">show only 3</option>
</select>
<br><br>
homeware<select id="select1" name="select1">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
<br>
electronics<select id="select2" name="select2">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
    <br>
kitchen<select id="select3" name="select3">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>

注意：

IE在hide上不允许option。解决方法是使用.prop('disabled', true)作为优雅降级。

小提琴：http://jsfiddle.net/abhitalks/c9a3fLy5/

示例3 ：

$("#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().prop('disabled', false); $ddl.val(''); // show all options and reset the value
    } 
    else {
      $ddl.find("option").hide().prop('disabled', true); // 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).prop('disabled', false);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectlist" name="selectlist" >
    <option value="">---Filter---</option>
    <option value="1">show only 1</option>
    <option value="2">show only 2</option>
    <option value="3">show only 3</option>
</select>
<br><br>
homeware<select id="select1" name="select1">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
<br>
electronics<select id="select2" name="select2">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>
    <br>
kitchen<select id="select3" name="select3">
    <option value=""></option>
    <option value="product_1">product 1</option>
    <option value="product_2">product 2</option>
    <option value="product_3">product 3</option>
</select>

答案 1 :(得分：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();

<强> Working Demo

相关问题
最新问题