Как создать зависимый раскрывающийся список JS, добавив новые указанные параметры?

Question

Я создал два выбранных тега как «Группа материалов», которые вы можете найти по ссылке ниже: [https://codepen.io/adan96/pen/ExaRgOe?editors=1010] [1]

С учетом значений одного текста в обоих выберите теги с именем «Группа материалов». Я хочу выбрать первый вариант в иерархии продуктов. Например:

Группа материалов:
"001 - SWA C" и "001 - SRAY"

Первый выбор в иерархии товаров должен иметь параметры:
"A SH -09BIR "и" A SH -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 здесь ...