1 parent avec 2 enfants déroulant

Question

J'essaye de créer 1 Parent Drop Down, qui a 2 listes déroulantes d'enfant dépendantes en utilisant JAVASCRIPT.

Ma page html est à - http://www.larkgrove.com/entryform/entryform.html

J'utilise les options dynamiques Listes/dépendantes Sélectionne: http://www.javascripttoolbox.com/lib/dynamicoptionlist/examples.php

Si vous consultez mon site, vous pouvez voir que je peux obtenir les listes d'enfants à changer entre rien là-bas et "NULL", mais c'est à peu près tout ce que je peux faire.

MERCI!

Answer 1

Eh bien, tout d'abord, nous allons jeter un oeil à votre code:

<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> 

Je ne pense pas que ce soit à faire ce que vous avez l'intention à faire, en particulier ceci:

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

Voyez comment vous appelez .forvalue ("A") plusieurs fois de manière redondante? Si vous regardez l'exemple de code que vous voyez:

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

Je voudrais essayer quelque chose comme ceci:

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

Answer 2

Je sais que vous utilisez le script options dynamiques, mais je pensais que je mettrais en place une solution rapide à partir de zéro. Le code est un peu verbeux, mais j'espère qu'il sera plus facile de voir ce qui se passe de cette façon. La page de travail final est ici: http://ryanscook.com/Files/DropDownListTest.htm

Lets commencer par supposant que vous avez ce code 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> 

Vous remarquerez que nous avons un gestionnaire onchange, voici le script 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; 
} 

J'espère que cela aide et n'était pas loin de votre question.