根據每個選項的值或ID過濾選擇框

Question

我想使用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來實現上述目標

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

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

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

工作演示