1 родитель с 2 детьми выпадающий список

Я пытаюсь создать 1 родительский раскрывающийся список, в котором есть 2 раскрывающихся списка зависимых дочерних элементов, используя JAVASCRIPT.

Моя html-страница находится по адресу - http://www.larkgrove.com/entryform/entryform.html

Я использую списки динамических параметров / зависимые выборки: http://www.javascripttoolbox.com/lib/dynamicoptionlist/examples.php

Если вы зайдете на мой сайт, то увидите, что я могу заставить дочерние списки переключаться между «ничего» и «NULL», но это все, что я могу сделать.

БЛАГОДАРНОСТЬ!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
3 685
2

Ответы 2

Что ж, для начала посмотрим на ваш код:

<script type = "text/javascript">
var TESTLIST = new DynamicOptionList("PARENT1","CHILD1","CHILD2");
TESTLIST.forValue("A").forValue("A").forValue("A").addOptionsTextValue("C","C","D","D");
</script>
<select name = "PARENT1">
    <option value = "A">A</option>
    <option value = "B">B</option>
</select>
<br /><br />
<select name = "CHILD1"><script type = "text/javascript">TESTLIST.printOptions("CHILD1")</script></select>
<br /><br />
<select name = "CHILD2"><script type = "text/javascript">TESTLIST.printOptions("CHILD2")</script></select>

Я не думаю, что это делает то, что вы собираетесь делать, особенно это:

TESTLIST.forValue("A").forValue("A").forValue("A").addOptionsTextValue("C","C","D","D");

Видите, как вы вызываете .forvalue ("A") несколько раз с избыточностью? Если вы посмотрите на пример кода, вы увидите:

regionState.forValue("west").addOptions("California","Washington","Oregon");

Я бы попробовал что-то вроде этого:

TESTLIST.forValue("A").addOptionsTextValue("C","D");
TESTLIST.forValue("B").addOptionsTextValue("E","F");

Я пробовал это и многие другие варианты, но это не сработало. Первый раскрывающийся дочерний элемент работает, а второй - нет. Я использовал TESTLIST.forValue («A»). ForValue («A»). ForValue («A»). AddOption‌ sTextValue («C», «C», «‌ D», «D»); поскольку это единственный способ хотя бы вызвать некоторые изменения в обоих дочерних раскрывающихся списках

TSM 12.12.2008 16:14

Я знаю, что вы используете сценарий динамических параметров, но я подумал, что предложу быстрое решение с нуля. Код немного многословен, но я надеюсь, что так будет легче понять, что происходит. Последняя рабочая страница находится здесь: http://ryanscook.com/Files/DropDownListTest.htm

Начнем с предположения, что у вас есть этот html:

<select id = "parentList" onchange = "parentList_OnChange(this)">
    <option>Choose an option</option>
    <option value = "A">A</option>
    <option value = "B">B</option>
    <option value = "C">C</option>
    <option value = "D">D</option>
</select>

<select id = "childList1"></select>
<select id = "childList2"></select>

Вы заметите, что у нас есть обработчик onchange, вот сценарий java:

// Data for child list 1, this is a of the parent value to one or more options
var childList1Data = {
    "A": ["ChildList1 - A1", "ChildList1 - A2", "ChildList1 - A3"],
    "B": ["ChildList1 - B1"],
    "C": ["ChildList1 - C1", "ChildList1 - C2"],
    "D": ["ChildList1 - D1", "ChildList1 - D2"]
};


// Data for child list 2, this is a of the parent value to one or more options
var childList2Data = {
    "A": ["ChildList2 - A1", "ChildList2 - A2"],
    "B": ["ChildList2 - B1", "ChildList2 - B2", "ChildList2 - B3"],
    "C": ["ChildList2 - C1", "ChildList2 - C2"],
    "D": ["ChildList2 - D1"]
};


// onchange is called when the parent value is changed
function parentList_OnChange(objParentList) {
    var child1 = document.getElementById("childList1");
    var child2 = document.getElementById("childList2");

    // Remove all options from both child lists
    removeOptions(child1);
    removeOptions(child2);

    // Lookup and get the array of values for child list 1, using the parents selected value
    var child1Data = childList1Data[objParentList.options[objParentList.selectedIndex].value];

    // Add the options to child list 1
    if (child1Data) {
        for (var i = 0; i < child1Data.length; i++) {
            child1.options[i] = new Option(child1Data[i], child1Data[i]);
        }
    }


    // Do the same for the second list
    var child2Data = childList2Data[objParentList.options[objParentList.selectedIndex].value];

    if (child2Data) {
        for (var i = 0; i < child2Data.length; i++) {
            child2.options[i] = new Option(child2Data[i], child2Data[i]);
        }
    }
}


function removeOptions(objSelect) {
    while (objSelect.options.length > 0)
        objSelect.options[0] = null;
}

Я надеюсь, что это поможет, и это было не так уж и далеко от вашего вопроса.

Большой! Это работает, именно то, что я искал. Спасибо! larkgrove.com/entryform/entryform2.html

TSM 12.12.2008 16:22

Другие вопросы по теме