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

У меня 3 выпадающего списка, значения, заполненные динамически с помощью mysql. Теперь я пытаюсь каскадировать 3 выпадающего списка, но JS-скрипт не работает.

То, что я пытаюсь сделать:

Случай 1: Если пользователь выберет значение из раскрывающегося списка # 1, значение выпадающего списка # 2 зависит от выпадающего списка # 1, значение выпадающего списка 3 зависит от выпадающего списка # 2. Например, State – City – Avenue

Случай 2: пользователь может выбрать один из трех выпадающих меню.

Случай 3 и 4: Если пользователь выбирает из раскрывающегося списка № 2, значения выпадающего списка 3 зависят от выпадающего списка # 2 (но выбор значения в выпадающем списке №3 является необязательным, если выпадающее меню №2 уже)

Форма:

<form action='' method='post' id='loc'> <select name="state" id="filter_region" class="state"> <option name="default" class="default" value="State" readonly>State</option> <?php foreach($result_state as $option){ if(isset($_POST['state']) && $_POST['state'] == $option->state) echo '<option name="state" class="filter_by" selected value="'. $option->state .'">'. $option->state .'</option>'; else echo '<option name="state" class="filter_by" value="'. $option->state .'">'. $option->state .'</option>'; }; ?> </select> <select name="city" id="filter_city" class="city"> <option name="default" class="default" value="City" readonly>City</option> <?php foreach($result_city as $option){ if(isset($_POST['city']) && $_POST['city'] == $option->city) echo '<option name="city" class="filter_by" selected value="'. $option->city .'">'. $option->city .'</option>'; else echo '<option name="city" class="filter_by" value="'. $option->city .'">'. $option->city .'</option>'; }; ?> </select> <select name="avenue" id="filter_mall" class="avenue"> <option name="default" class="default" value="Avenue" readonly>Avenue</option> <?php foreach($result_avenue as $option){ if(isset($_POST['avenue']) && $_POST['avenue'] == $option->avenue) echo '<option name="avenue" class="default" selected value="'. $option->avenue .'">'. $option->avenue .'</option>'; else echo '<option name="avenue" class="filter_by" value="'. $option->avenue .'">'. $option->avenue .'</option>'; }; ?> </select> <input type="submit" value="submit" class="submit"/> </form> 

JS:

 function cascadeSelect(parent, child){ var childOptions = child.find('option:not(.default)'); child.data('options',childOptions); parent.change(function(){ childOptions.remove(); child .append(child.data('options').filter('.filter_by' + this.value)) .change(); }) childOptions.not('.default, .filter_by' + parent.val()).remove(); } $(function(){ cascadeForm = $('.loc'); state= cascadeForm.find('.state'); city= cascadeForm.find('.city'); avenue= cascadeForm.find('.avenue'); cascadeSelect(state, city); cascadeSelect(city, avenue); }); 

Я создал каскадные селекторные поля с родительским ядром, используя 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; } }