根据在另一个 Select 中选择的值过滤 Select（下拉）选项
[英]Filter Select (Drop Down) Options Based on Value Selected in another Select
问题描述
I have code below that is populating a select with values from the result array.
我在下面的代码中使用结果数组中的值填充 select。 - What I want to do is create an additional select that will filter the results based on the value {tag} selected. - 我想要做的是创建一个额外的 select 将根据所选值 {tag} 过滤结果。
For example:例如：
I want the first select to only have the tags as options, based on the tag selected, the second select will only show names filtered by the selected tag.我希望第一个 select 仅将标签作为选项，根据所选标签，第二个 select 将仅显示由所选标签过滤的名称。
I am also open to opinions on better ways to do this, for instance, if radio options work better for the filter then I would use those.我也对更好的方法持开放态度，例如，如果无线电选项对过滤器更有效，那么我会使用这些。 - Thanks in advance! - 提前致谢！
UPDATE: Snippet has been changed to include additional select with tag values.更新：代码段已更改为包含带有标签值的附加 select。 Just need to figure out how to make the second select change based on the tag selected in the first 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>
2 个解决方案
解决方案1
1 已采纳 2020-07-20 19:51:36
See this.看到这个。 I have added comments wherever necessary:我在必要时添加了评论：
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>
解决方案2
0 2020-07-20 14:39:23
U can use JQuery to achieve that easily.您可以使用JQuery轻松实现。 with $element.change() - every time u change the first select.selectedValue -> u can refresh and update the second select.使用 $element.change() - 每次你更改第一个 select.selectedValue -> 你可以刷新和更新第二个 select。
$('#hclist').change(function(){
refreshSecondSelect($(this).val());
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.