Comment créer une liste de cases à cocher de manière dynamique avec javascript

Mise à JOUR: le Code a été mis à jour par Dan commentaires.

J'ai un problème avec un projet que je suis en train de travailler sur. J'ai besoin de créer une liste de cases à cocher selon ce qui est sélectionné dans une liste déroulante ci-dessus. Je voudrais utiliser du javascript pour ça. J'ai été en mesure de créer une liste déroulante dépend de la sélectionner ci-dessus, mais le client veut des cases à cocher à la place. J'ai pensé qu'il serait essentiellement le fait de la même façon, à l'exception de prise de cases, à ce moment, mais je peux pas le faire fonctionner. J'ai l'habitude d'utiliser php pour ma programmation et donc ne connais pas javascript aussi bien. Voici le code que j'ai à faire de l'sélectionnez le menu déroulant.... quel serait le meilleur moyen d'en faire une liste de cases à cocher à la place? Veuillez noter que ce code a été fortement réduit à garder facile à lire (uniquement les parties de la matière sont ici).

Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function populate(slct1,slct2){
var s1 = document.getElementById(slct1);
var s2 = document.getElementById(slct2);
s2.innerHTML = "";
if(s1.value == "Cat1"){
var optionArray = ["Subcat1","Subcat1.1","Subcat1.2"];
} else if(s1.value == "Cat2"){
var optionArray = ["Subcat2","Subcat2.1","Subcat2.2"];
} else if(s1.value == "Cat3"){
var optionArray = ["Subcat3","Subcat3.1","Subcat3.3"];
}
for(var option in optionArray){
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var newOption = document.createElement("option");
newOption.value = pair;
newOption.innerHTML = pair;
s2.options.add(newOption);
}
}
}
</script>
</head>
<body>
<h2>Dynamic Select Dropdown</h2>
<hr />
Choose a Category:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Cat1">Cat1</option>
<option value="Cat2">Cat2</option>
<option value="Cat3">Cat3</option>
</select>
<hr />
Choose Subcategory:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>

Toute aide serait grandement appréciée et je voudrais essayer de mon mieux pour rembourser la faveur si jamais vous avez besoin d'aide avec le développement.

Notez que for(var option in optionArray) comprendra les propriétés natives de optionArray ainsi, vous ne voulez pas. Voir hasOwnProperty. jsfiddle.net/dandv/9aZQF
Merci Dan. J'ai mis à jour le code pour prendre en compte vos commentaires. Aucune idée sur comment faire ce que je dois faire pour résoudre mon problème principal?
J'ai juste posté répondre, avec un travail complet exemple 🙂

OriginalL'auteur stereoscience | 2012-11-11

16

Une case à cocher est un simple élément d'entrée avec type='checkbox'. Donc, vous avez à préparer au moins deux choses: un nœud de texte pour la description de la boîte et la boîte elle-même. Dans ce cas, il est également bon d'utiliser une <label> élément à inclure à la fois des choses mentionner avant:
```
//create the necessary elements
var label= document.createElement("label");
var description = document.createTextNode(pair);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";    //make the element a checkbox
checkbox.name = "slct[]";      //give it a name we can check on the server side
checkbox.value = pair;         //make its value "pair"
label.appendChild(checkbox);   //add the box to the element
label.appendChild(description);//add the description to the element
//add the label element to your div
document.getElementById('some_div').appendChild(label);
```
Vous devez effectuer les étapes ci-dessus pour chaque paire. Notez que vous devez effacer la donnée <div id="some_div"></div> avant de le remplir:
```
//clear the former content of a given <div id="some_div"></div>
document.getElementById('some_div').innerHTML = '';
```
Je voterais cette place, mais je n'ai pas 15 réputation. Mais je n'ai marquer comme réponse. Je vous remercie pour l'aide. Il fonctionne très bien. J'avais essayé quelque chose de similaire, mais ne pouvait pas le faire fonctionner. Je suppose que ma syntaxe est mauvais au premier abord. De toute façon, il faut travailler, et je vous en remercie. Maintenant je peux dormir et finir en quelques heures.
Vous êtes les bienvenus. Juste une autre remarque: N'utilisez pas de for( x in object) boucle pour les tableaux. Au lieu d'utiliser for(i = 0; i < array.length; ++i). Voir aussi la remarque dans la description sur MDN.
Je me souviendrai de cela et donner un coup de feu.

OriginalL'auteur Zeta
7

Le processus de création d'une case à cocher dynamiquement est en effet un peu plus complexe que la création d'une option de sélection. Vous devez créer:
- la case
- son étiquette
- et, éventuellement, d'un <br> pour le style de
Voici l'essentiel du code, avec le plein de violon à http://jsfiddle.net/dandv/9aZQF/2/:
```
for (var option in optionArray) {
if (optionArray.hasOwnProperty(option)) {
var pair = optionArray[option];
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = pair;
checkbox.value = pair;
s2.appendChild(checkbox);
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s2.appendChild(label);
s2.appendChild(document.createElement("br"));    
}
}
```
Merci pour l'entrée. Je l'avais déjà vu Zeta de répondre à ce qui a fonctionné. Mais je n'ai ajouter la ligne de br que vous l'avez suggéré, pour le rendre plus agréable.

OriginalL'auteur Dan Dascalescu

Vous devez vous connecter pour publier un commentaire.