根据另一个选择中选择的值筛选选择(下拉)选项 [英] Filter Select (Drop Down) Options Based on Value Selected in another Select
问题描述
我下面有代码，用结果数组中的值填充选择. -我要做的是创建一个附加选择，该选择将根据所选的{tag}值对结果进行过滤.
I have code below that is populating a select with values from the result array. - What I want to do is create an additional select that will filter the results based on the value {tag} selected.
例如:
我希望第一个选择仅将标签作为选项，根据所选的标签，第二个选择将仅显示按所选标签过滤的名称.
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.
例如，如果单选选项对过滤器更好，那么我也愿意使用更好的方法. -预先感谢！
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. Just need to figure out how to make the second select change based on the tag selected in the first 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>
推荐答案
参见此内容.我在必要时添加了评论:
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>
这篇关于根据另一个选择中选择的值筛选选择(下拉)选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
