Comment utiliser appendchild ?

Salut ;)


Malgré les tutos et aussi les exemples du net je n'ai pas reussi à utiliser appendChild, je voulais ajouter des options dans un select en me servant d'une chaine qui contient les noms des options que je veux intégrer dans le sélect.

Code:

---

1 2 3 4 5 6 7 8 9

var objets_types="cuisine,mécanique,jardinage,escalade"; // Differentes options d'outils.   var tabtypes=objets_types.split(','); // Je les met dans le tableau tabtypes.   for(n=0;n<tabtypes.length;n++){ // Parcours la liste des options dans le tableau. // Crée une balise option dans le sélect. document.monselect.appenchild.option[n]=tabtypes[n]; }

---

Quelle est la façon de l'utiliser ?

Donne nous tous le code. On a besoin du code HTML notamment.

Quelle est l'erreur que tu vois dans ta console?

Salut ;)

Mon code c'est ça, un select que je nomme "monselect" et je veux y ajouter des options qui sont contenues dans la chaine indiquée dans le code.

Code:

---

1 2	<select id="monselect" name="monselect"> </select>

---

Et si l'utilisateur selectionne ensuite une option, j'aimerais pouvoir remettre le selecteur en position 0 si c'est possible ;)
J'ai essayé ça :

Code:

---

document.getElementsByTagName(monselect).options[0].selected = 0;

---

et aussi :

Code:

---

document.getElementsByTagName(monselect).options[0].selected = "selected";

---

rien ne fonctionne.

En changeant ton code au minimum:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var objets_types="cuisine,mécanique,jardinage,escalade"; // Differentes options d'outils.   var tabtypes=objets_types.split(','); // Je les met dans le tableau tabtypes.   var select = document.getElementById('monselect');   for(n=0;n<tabtypes.length;n++){ // Parcours la liste des options dans le tableau. // Crée une balise option dans le sélect. var option = document.createElement('option'); option.text = tabtypes[n]; select.add(option); }

---

et:

Code:

---

document.getElementById('monselect').options[0].selected = true;

---

Je ne sais pas où tu as trouvé tes exemples mais on dirait que ce n'est pas une source très fiable (ou alors tu as mal ré-appliqué).
http://www.w3schools.com/jsref/prop_option_selected.asp

Super !!!
Je te remercie pour ton aide et aussi pour ton post pour les débutants !
C'est tout a fait le code qu'il me faut là ;)
Je met en résolu.

RE ;)

J'ai une erreur, c'est pas à cause de ça : ?

Code:

---

select.add(select); // Il ne faut pas mettre add(option) là ?

---

Et sinon le code de mon select doit aller dans un div comme ça :

Code:

---

1 2 3 4 5 6 7 8 9

<div id="mondiv"> <select id="monselect" onchange="#"> <option>cuisine</option> <option>mécanique</option> <option>jardinage</option> <option>escalade</option> </select> </div

---

Et quand je voulais voir avec console.log(select) il ne le trouvais pas.
J'ai ajouté un onchange="#" dans ce code parce que je vais en avoir besoin.

Mon but est de créer une liste d'options (un sélect) contenu dans un DIV qui existe déjà, et les valeurs des options du select sont prises dans la chaine objets_types comme on a fait précédemment (voir plus haut).
Et après cette création je voudrais pouvoir le voir dans la console, c'est faisable ?

Oui bien sûr, c'est select.add(option);. Désolé pour la faute de frappe!

Je ne comprends pas très bien ce que tu veux voir dans la console...

Content que le post pour les débutant t'ait plu!

Ce que je voulais voir dans la console c'est le résultat de l'ajout des options dans le sélect, pour vérifier que ça a bien été fait.
ça marche aussi si mon sélect est dans un div comme indiqué ci-dessus ?
J'ai pas l'impression qu'il le reconnaît ou alors je me suis trompé quelque part :/

Et le onchange à ajouter dans le sélect, il faut faire comment ?

Normalement, tu peux voir le résultat directement dans ta page HTML. Si tu veux essayer de voir quelque chose dans la console quand même, essaie:

Code:

---

document.getElementById('monselect')

---

Pour le onchange ouvre une autre discussion ;)

Merci Gnuum !