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

您可以使用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)。

:

$("#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 s上。解决方法是使用.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)写更改事件在主选择

3)隐藏所有的选项，并显示其值包含main select options selected value的选项。

4)在附加事件后触发更改，以确保默认情况下所有其他select元素都是隐藏的

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