Intereting Posts
Получить удаленный символ из содержимого редактируемого div полноэкранное отзывчивое фоновое изображение с бутстрапом HTML CSS exersice, простой (просто для понимания задачи) Как централизовать глификон по горизонтали с помощью Twitter Bootstrap Сохранение выбора пользователя при обновлении страницы Удаление поля на встроенном блоке после обертывания Создание windows предупреждения jquery с текущим кодом Применить стиль к ячейкам первой строки Передача переменных на новую страницу без строки запроса Отключить опцию Drop Down после выбора в другой раскрывающемся списке Доступ к элементам формы с использованием jquery и DOM html php meta charset UTF-8 не работает? В HTML5, в отношении таблиц, что заменяет cellpadding, cellpacing, valign и align? jQuery скользящая боковая панель справа налево с изменением размера содержимого Проверка jQuery с помощью настраиваемого CSS-флажка

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

У меня есть раскрывающийся список, когда я выбираю вариант, он создает динамическое раскрывающееся меню. Все идет нормально.

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

Первое динамическое выпадающее меню работает, я думаю, что второй не работает, потому что динамическая переменная «div» не имеет статического идентификатора. Может ли кто-нибудь помочь мне решить мою проблему?

Вот код:

Inventory Request

Name (type) Subtype Description Quantity
Seleccione un equipo Modules MicroInverters

Еще много вариантов …

  

JavaScript:

  var created = 0; function displayMenus() { if (created == 1) { removeDrop(); } //Call mainMenu the main dropdown menu var mainMenu = document.getElementById('mainMenu'); //Create the new dropdown menu var whereToPut = document.getElementById('myDiv'); var newDropdown = document.createElement('select'); newDropdown.setAttribute('id',"newDropdownMenu"); whereToPut.appendChild(newDropdown); if (mainMenu.value == "modules") { //add option var optionBovietM=document.createElement("option"); optionBovietM.text="BovietModule"; optionBovietM.value="BovietModule"; newDropdown.add(optionBovietM,newDropdown.options[null]); //add option var optionHanwhaM=document.createElement("option"); optionHanwhaM.text="HanwhaQCellModule"; newDropdown.add(optionHanwhaM,newDropdown.options[null]); } else if (mainMenu.value == "microinverters") { var optionEnphaseMI=document.createElement("option"); optionEnphaseMI.text="EnphaseMicroInverters"; newDropdown.add(optionEnphaseMI,newDropdown.options[null]); } else if (mainMenu.value == "enphase") { 

После всех вариантов …

 } created = 1 } function removeDrop() { var d = document.getElementById('myDiv'); var oldmenu = document.getElementById('newDropdownMenu'); d.removeChild(oldmenu); }  

Не устанавливайте onchange="displayMenus2()" в HTML, как вы заметили: он не работает. Это происходит не из-за идентификатора, а из-за того, что он установлен на div а div s не имеет событий onchange .

Вместо этого вы должны установить его в JavaScript при создании нового раскрывающегося списка.

 //Create the new dropdown menu var whereToPut = document.getElementById('myDiv'); var newDropdown = document.createElement('select'); newDropdown.setAttribute('id',"newDropdownMenu"); newDropdown.onchange = displayMenus2; // < -- add the listener like this whereToPut.appendChild(newDropdown); 

Обновить

хорошо, кажется, вам нужно больше 🙂 позвольте мне полностью переписать ваш код. Самое главное, что я включил все ваши варианты выбора в JavaScript. Это имеет больше смысла, и это более легко управляемо.

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

 // the data var options = { Modules: { BovietModule: "description", HanwhaQCellModule: "some other" }, microinverters: { EnphaseMicroInverters: "hello" }, subtype: { "make spaces like this": "hi again" }, nothing: "no subtype" } // create new select menues function createSelect(from) { var newDropdown = document.createElement("select") var option = document.createElement("option") option.text = "Seleccione un equipo" option.disabled = option.selected = true newDropdown.add(option) for (var item in from) { option = document.createElement("option") option.text = option.value = item newDropdown.add(option) } return newDropdown } // init var mainSelect = createSelect(options) main.appendChild( mainSelect ) mainSelect.onchange = function() { // remove all subtypes while (subtype.firstChild) subtype.removeChild(subtype.firstChild) description.innerText = '' // add new one if(typeof options[mainSelect.value] == 'string') description.innerText = options[mainSelect.value] else { var subSelect = createSelect(options[mainSelect.value]) subtype.appendChild( subSelect ) subSelect.onchange = function() { description.innerText = options[mainSelect.value][subSelect.value] } } } 
 

Inventory Request

Name (type) Subtype Description Quantity