根据在另一个 Select 中编辑的值 Select 过滤 Select（下拉）选项

Question

下面的代码使用结果数组中的值填充 select。 - 我想要做的是创建一个额外的 select，它将根据值 {tag} selected.

过滤结果

例如：

我希望第一个 select 仅将标签作为选项，基于标签 selected，第二个 select 将仅显示由 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

你可以使用 JQuery 轻松实现。使用 $element.change() - 每次您更改第一个 select.selectedValue -> 您可以刷新并更新第二个 select.

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

参见示例：example

Answer 2

看到这个。我在必要时添加了评论：

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>

根据在另一个 Select 中编辑的值 Select 过滤 Select（下拉）选项

Filter Select (Drop Down) Options Based on Value Selected in another Select

javascript

api

filter

drop-down-menu