1 Родитель с 2 детьми Drop Down

Question

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

Моего HTML страница в - http://www.larkgrove.com/entryform/entryform.html

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

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

СПАСИБО!

Answer 1

Ну, во-первых, давайте посмотрим на код:

<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"); 

Answer 2

Я знаю, что вы используете динамические параметры сценария, но я думал, что я бы поставить быстрое решение с нуля. Код немного подробный, но я надеюсь, что будет легче увидеть, что происходит на этом пути. Заключительная рабочая страница находится здесь: 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 обработчик, вот ява скрипт:

// 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; 
} 

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