Geek Answers Handbook

Filter selection fields based on the value or identifier of each option

I would like to use jquery to filter all selection fields on the form

For example: in the first selection window, if I select "show only 1", I want to filter out all the selection parameters in all the selection elements to hide any option where the value does not contain "_1". Only the product value with "_1" should appear.

If "--- Filter ---" is selected, the default value for all selection fields must be empty

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>

I would like to know how to use jQuery to achieve the above.

+4
source share
2 answers

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>
Hide result

( ), .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>
Hide result

IE hide option s. .prop('disabled', true) .

Fiddle: 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>
Hide result
+3

:

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

+2

More articles:


All Articles