Выпадающий каскад с использованием JS не работает

Я создал каскадные селекторные поля с родительским ядром, используя AngularJS , но так как вы используете NativeJS, я попытался воссоздать с помощью JS. Предварительным условием моего решения является четко определенный JSON, на основе которого будут созданы ячейки выбора. Вам нужно будет создать JSON на стороне сервера или вручную или везде, где вы создаете данные select-box. Ниже приведен формат JSON .:

Каждый select-box – это именованный объект со следующими свойствами:

1. Родительский атрибут: имя объекта, который является родительским элементом этого объекта select-box.

2. Параметры: массив объектов опций, где каждый объект содержит: (a) значение параметра (b) родительское значение параметра – родительское поле выбора, с которым сопоставляется текущее значение. (c) Идентификатор опции.

3. Выбранный вариант: объект с двумя свойствами: (a) выбранное текущее значение (b) идентификатор текущего выбранного значения.

Вот рабочий Plunker решения. Надеюсь, поможет.

—– РЕДАКТИРОВАТЬ: —–

По запросу @ User014019

Ниже приведена другая версия этого раскрывающегося меню, в котором все параметры во всех выделенных ячейках видны изначально, а отношения родитель-потомок устанавливаются, когда пользователь выбирает конкретное значение.

Ниже приведен код:

 // reads the data and creates the DOM elements (select-boxes and their relevant options) function initSelect(data) { var select, option, input, filteredOptions; for (var key in data) { select = document.createElement("select"); select.name = key; container.appendChild(select); filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]); input = document.querySelector('select[name="' + key + '"'); input.setAttribute("onchange", "updateSelect(this)"); for (var i = 0; i < filteredOptions.length; i++) { option = document.createElement("option"); option.value = filteredOptions[i].value; option.innerHTML = filteredOptions[i].value; input.appendChild(option); } input.options.selectedIndex = getSelectedIndex(filteredOptions, data[key]); input.setAttribute('model', data[key].selectedOption.value); } } // this function will be called on change of select-box function updateSelect(element) { var input, option; setSelectedOption(element); for (var key in data) { filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]); input = document.querySelector('select[name="' + key + '"'); while (input.firstChild) { input.removeChild(input.firstChild); } for (var i = 0; i < filteredOptions.length; i++) { option = document.createElement("option"); option.value = filteredOptions[i].value; option.innerHTML = filteredOptions[i].value; input.appendChild(option); } input.options.selectedIndex = getSelectedIndex(filteredOptions, data[key]); input.setAttribute('model', data[key].selectedOption.value); } } // set the selected-option of select-box when it's changed function setSelectedOption(element) { var inputName = element.getAttribute("name"); var inputValue = getSelectedText(element); var inputItem = data[inputName]; var selectedOption, filteredOptions; // setting selected option of changed select-box for (var i = 0; i < inputItem.availableOptions.length; i++) { if (inputValue === inputItem.availableOptions[i].value) { inputItem.selectedOption = inputItem.availableOptions[i]; break; } } // setting child object selected option now for (var key in data) { if (data[key].parent === inputName) { filteredOptions = optionFilter(data[key].availableOptions, data[data[key].parent], data[key]); data[key].selectedOption = filteredOptions[0]; } } } // get the text of select-box function getSelectedText(element) { if (element.selectedIndex == -1) { return null; } return element.options[element.selectedIndex].text; } function getSelectedIndex(options, self) { var index; for (var i = 0; i < options.length; i++) { if (self.selectedOption.value === options[i].value) { index = i; break; } } return index; } // get filtered options based on parent's selected value function optionFilter(items, parent, self) { var result = []; if (typeof parent !== "undefined") { for (var i = 0; i < items.length; i++) { if (typeof parent.selectedOption !== "undefined") { if (parent.selectedOption !== null && items[i].parentValue === parent.selectedOption.value) { result.push(items[i]); } } } if (typeof self.selectedOption === "undefined") { self.selectedOption = null; } if (self.selectedOption === null) { self.selectedOption = result[0]; } return result; } else { return items; } }