时间戳

首页 > 解决方案 > 如何通过添加新的指定选项来创建依赖 JS 下拉列表？

javascript - 如何通过添加新的指定选项来创建依赖 JS 下拉列表？

问题描述

我创建了两个选择标签作为“材料组”，您可以在下面的链接中找到它们：[ https://codepen.io/adan96/pen/ExaRgOe?editors=1010][1]

考虑到名为“材料组”的两个选择标签中的单个文本值，我想选择产品层次结构中的第一个选项。例如：

材料组：
“001 - SWAC”和“001 - SRAY”

Product Hierachy 中的第一个选择应该有选项：
“ASH-09BIR”和“ASH-12BIR”

请检查一些JS代码：

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select3 = document.getElementById("select3");
var select4 = document.getElementById("select4");
var select5 = document.getElementById("select5");

var productHierarchy = ["ASH-09BIR", "ASH-12BIR"];

if (select1.options[select1.selectedIndex].text == "001 - SWAC" && select2.options[select2.selectedIndex].text == "001 - SRAY") {
  for (var i = 0; i <= productHierarchy.length; i++) {
    var opt = document.createElement("option");
    opt.value = opt.text = productHierarchy[i];
    console.log(opt.value);
    select3.add(opt);
  }
}

我也试过“select3.appendChild(opt)”。但是，它仍然不起作用，我无法从声明的数组中显示这两个新选项。

你能建议吗？;)

标签： javascripthtmlarraysfrontend

解决方案

首先获取所有选择元素，例如，

const selects = document.querySelectorAll('select')

然后forEach在所有选择框上做，然后在每个选择上单独做一个addEventListener，比如，

 selects.forEach(select => {
    select.addEventListener('change', () => {
      //Your logic here...
    })
 })

然后更改for (var i = 0; i <= productHierarchy.length; i++) 为 for (var i = 0; i < productHierarchy.length; i++).. 仅给出（<而不是），因为..<=中只有两个元素productHierarchy

分叉的 Codepen 示例在这里...

推荐阅读