根據在另一個 Select 中選擇的值過濾 Select（下拉）選項

Question

我在下面的代碼中使用結果數組中的值填充 select。 - 我想要做的是創建一個額外的 select 將根據所選值 {tag} 過濾結果。

例如：

我希望第一個 select 僅將標簽作為選項，根據所選標簽，第二個 select 將僅顯示由所選標簽過濾的名稱。

我也對更好的方法持開放態度，例如，如果無線電選項對過濾器更有效，那么我會使用這些。 - 提前致謝！

更新：代碼段已更改為包含帶有標簽值的附加 select。 只需要弄清楚如何根據第一個 select 中選擇的標簽來更改第二個 select。

 let result = [ {name: "some name", tag: "some tag"}, {name: "some name1", tag: "some tag1"}, {name: "some name2", tag: "some tag2"}, {name: "some name2-2", tag: "some tag2"} ]; let hcList = document.getElementById("hclist"); Object.keys(result).map((key) => hcList.add(new Option(result[key].name, JSON.stringify(result[key])))); let uniqueTags = [...new Set(result.map((item) => item.tag))]; let tagList = document.getElementById("taglist"); Object.keys(uniqueTags).map((key) => tagList.add(new Option(uniqueTags[key])) );

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <select id="taglist"></select> <select id="hclist"></select> </body> </html>

Answer 1

看到這個。 我在必要時添加了評論：

 let result = [ {name: "some name", tag: "some tag"}, {name: "some name1", tag: "some tag1"}, {name: "some name2", tag: "some tag2"}, {name: "some name2-2", tag: "some tag2"} ]; //Generic function to fill a dropdown with options let populateDropDown = (params) => { params.optionsToPopulate.forEach(item => { params.ddlElement.add(new Option(item[`${params.text}`], item[`${params.text}`])) }) } //Initialize tags dropdown (function(){ document.getElementById("tagsDdl").addEventListener('change', (event) => { tagChanged(event); }); let params = { optionsToPopulate:result, ddlElement:document.getElementById("tagsDdl"), id:"tag", text:"tag" } populateDropDown(params); //Uncomment the below code if you want to set names dropdown on page load based on the value of tags dropdown on pageload /* let paramsNames = { optionsToPopulate:result.filter(item => item.tag === document.getElementById("tagsDdl").value), ddlElement:document.getElementById("namesDdl"), id:"name", text:"name" } populateDropDown(paramsNames);*/ })(); //Tags dropdown change event. let tagChanged = (event) => { let tagDdlValue = event.target.value; //filter the results based on the value of tags dropdonw let optionsToAdd = result.filter(item => item.tag === tagDdlValue); let namesDdl = document.getElementById("namesDdl"); namesDdl.options.length=0; let params = { optionsToPopulate:optionsToAdd, ddlElement:namesDdl, id:"name", text:"name" } populateDropDown(params); }

 <:DOCTYPE html> <html> <head> <title></title> </head> <body> Tags DDL: <select id="tagsDdl"></select> <br><br><br> Names DDL: <select id="namesDdl"></select> </body> </html>

Answer 2

您可以使用JQuery輕松實現。 使用 $element.change() - 每次你更改第一個 select.selectedValue -> 你可以刷新和更新第二個 select。

 $('#hclist').change(function(){
       refreshSecondSelect($(this).val());
    });

見例子：例子

根據在另一個 Select 中選擇的值過濾 Select（下拉）選項

問題描述

2 個解決方案

解決方案1
1 已采納 2020-07-20 19:51:36

解決方案2
0 2020-07-20 14:39:23

根據在另一個 Select 中選擇的值過濾 Select（下拉）選項

問題描述

2 個解決方案

解決方案1 1 已采納 2020-07-20 19:51:36

解決方案2 0 2020-07-20 14:39:23

解決方案1
1 已采納 2020-07-20 19:51:36

解決方案2
0 2020-07-20 14:39:23