Javascript Dropdowns dépendants multiples

Je suis nouveau en javascript et je suis aux prises avec le code suivant qui sera dans un formulaire pour l'enregistrement de plusieurs candidats.Javascript Dropdowns dépendants multiples

Il crée 2 zones de sélection dépendantes (pays et zone) pour chaque candidat.

Si vous cliquez une fois sur le bouton 'Ajouter un candidat', les cases dépendantes fonctionnent correctement, mais si vous cliquez de nouveau sur le bouton, cela ne fonctionne plus. Accéder aux valeurs sélectionnées à partir du formulaire lorsqu'il y a plus d'un candidat est également impossible car elles se remplaceront mutuellement.

J'ai essayé de créer les noms de sélection sous forme de tableaux en utilisant une variable de comptage que j'incrémente à chaque fois que la fonction ff est appelée, mais je n'arrive pas à la faire fonctionner.

Toute l'aide nous sera très utile!

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<title>Select Populate Test</title> 

<script> 
var UnitedStates = new Array(); 
UnitedStates[0] = "Texas"; 
UnitedStates[1] = "California"; 
UnitedStates[2] = "Arizona"; 
UnitedStates[3] = "Nevada"; 
UnitedStates[4] = "Florida"; 

var UnitedKingdom = new Array(); 
UnitedKingdom[0] = "Surrey"; 
UnitedKingdom[1] = "Kent"; 
UnitedKingdom[2] = "Dorset"; 
UnitedKingdom[3] = "Hampshire"; 

function populateDropdown(arry) 
{ 
    document.myForm.stateSelect.options.length = 0; 

    for (var i = 0; i < arry.length; i++) 
    { 
     document.myForm.stateSelect.options[i] = new Option(arry[i], arry[i]); 
    } 
} 

function updateDropdown(str) 
{ 
    var stateArray 
    var selectedCountry; 
    var countryDropdown = document.myForm.countrySelect; 

    for (var i = 0; i < countryDropdown.options.length; i++) 
    { 
     if (countryDropdown.options[i].selected) 
     { 
      selectedCountry = countryDropdown.options[i].value; 
     } 
    } 

    if (selectedCountry == 1) 
    { 
     stateArray = UnitedStates; 
     populateDropdown(stateArray); 
    } 

    if (selectedCountry == 2) 
    { 
      stateArray = UnitedKingdom; 
     populateDropdown(stateArray); 
    } 
} 

counter = 0; 
function ff() 
{ 
     counter++; 
     var box = document.getElementById("details"+counter); 

     var cselectBox = document.createElement("Select"); 
     cselectBox.name="countrySelect"; 
     cselectBox.onchange = function() 
     { 
      updateDropdown(); 
     } 

     var option1 = document.createElement("OPTION"); 
     option1.text="United States"; 
     option1.value=1; 
     cselectBox.options.add(option1); 

     var option2 = document.createElement("OPTION"); 
     option2.text="United Kingdom"; 
     option2.value=2; 
     cselectBox.options.add(option2); 

     document.getElementById("details"+counter).innerHTML+="</p><p>"+counter+". Candidate Country"; 
     box.appendChild(cselectBox); 

     var box2 = document.getElementById("detailsx"+counter); 

     var ccselectBox = document.createElement("Select"); 
     ccselectBox.name="stateSelect"; 
     document.getElementById("detailsx"+counter).innerHTML+="</p><p>"+counter+". Candidate City"; 
     box2.appendChild(ccselectBox); 
} 

</script> 
</head> 

<body> 
<form name="myForm" > 
<input type="button" value="Add Candidate" onClick="ff(); populateDropdown(UnitedStates);""> 
<!--- Note: 6 Candidates will be the maximum. --> 
<div id="details1"><b></b></div> 
<div id="detailsx1"><b></b></div> 
<div id="details2"><b></b></div> 
<div id="detailsx2"><b></b></div> 
<div id="details3"><b></b></div> 
<div id="detailsx3"><b></b></div> 
<div id="details4"><b></b></div> 
<div id="detailsx4"><b></b></div> 
<div id="details5"><b></b></div> 
<div id="detailsx5"><b></b></div> 
<div id="details6"><b></b></div> 
<div id="detailsx6"><b></b></div> 
</form> 
</body> 
</html>

Source

2013-08-31 user2735652

Il y a plusieurs problèmes ici. Nous aborderons celui avec lequel vous traitez en premier.

Lorsque vous nommez plusieurs contrôles avec le même nom, comme stateSelect, vous obtenez le premier chaque fois que vous essayez de le référencer. Si vous définissez plutôt l'ID sur 'stateSelect' + counter, vous obtiendrez un identifiant unique, que vous pourrez récupérer avec document.getElementById(). Ainsi, dans la fonction pour remplir la liste déroulante ressemblerait à ceci:

function populateDropdown(arry) 
{ 
    var stateSelect = document.getElementById('stateSelect'+counter); 
    stateSelect.options.length = 0; 

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

here is the fiddle j'ai utilisé pour vérifier ces changements.

Vous aurez également besoin d'ajouter un événement à chaque liste déroulante de pays pour repeupler la liste déroulante d'état quand elle change, et la structure a besoin d'un peu de travail pour cela. Si vous n'êtes pas opposé aux frameworks, KO rendrait cette opération incroyablement simple.

Here is the fiddle avec tout fonctionne correctement et les commentaires ajoutés à la clé change

Mise à jour: Ajout d'un lien vers le violon (s)

Source

2013-08-31 15:10:11 Lathejockey81

Merci pour cela, mais je ne peux toujours pas faire fonctionner. Si vous pouviez poster votre code complet plus tard, ce serait une aide précieuse! Pour l'instant, j'essaie juste de comprendre en utilisant Javascript avant de passer à l'utilisation des frameworks. – user2735652

Voyez le violon que j'ai attaché à la réponse. Je vous ferai savoir quand j'ajouterai le reste au violon, ou vous pouvez l'utiliser pour tester votre code à la place. C'est le moyen le plus rapide de tester le code côté client. – Lathejockey81

Maintenant, j'ai un lien vers une implémentation fonctionnant pleinement. J'ai dû changer plusieurs choses pour le faire fonctionner et j'ai ajouté des commentaires en conséquence. Faîtes moi savoir si vous avez d'autres questions. – Lathejockey81

Javascript Dropdowns dépendants multiples

Répondre

Questions connexes