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

Question

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

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

Material 组:
“001 - SWAC”和“001 - SRAY”

首先在产品层次结构中选择应该有选项:
“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)”。但是，它仍然不起作用，我无法从声明的数组中显示这两个新选项。

您能给点建议吗？ ;)

Answer 1

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

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 中只有两个元素..

Forked Codepen example here...