filter select boxes based on value or id of each option

Question

I would like to use jquery to filter all select boxes in a form

For example: In the first select box, if i select "show only 1", I want to filter all the select options in all the select elements to hide any option where the value does not contain "_1". Only product value with "_1" should show up.

If the option "---Filter---" is selected then the default value for all the select boxes should be blank

Here is the 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>

Would love to know how to use Jquery to achieve the above

Answer 1

You can use the contains selector "option[value*='" + sel + "']" to filter out the values and hide. To revert back, check if the selected value exists (in your case it is blank) and show at the same time resetting the value on all selects.

Example:

$("#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>

---

If you want to keep the default value as always blank (instead of selecting the filtered option), then just remove the last .prop('selected', true).

Example 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>

---

Note:

IE doesn't allow hide on options. The workaround would be to use .prop('disabled', true) as a graceful degradation.

Fiddle: http://jsfiddle.net/abhitalks/c9a3fLy5/

Example 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>

Answer 2

Here are the steps:

1) Get the sub select elements option elements that needs to be toggled based on main select.

2) write change event on main select

3) Hide all the options and show the options whose values contains main select options selected value.

4) trigger the change after attaching event to make sure by default all other select elements are hidden

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