Ajouter des éléments à une liste multiple

d0m
Mammouth du PHP | 1141 Messages

30 nov. 2007, 10:17

Bonjour,
j'ai un petit problème avec les listes multiples.
J'aimerais insérer dynamiquement des objets via javascript.

Pour une liste déroulante simple je procédai de cette manière :

Code : Tout sélectionner

//liste déroulante <SELECT NAME="liste"></SELECT> //remplissage javascript 1 var liste = document.formulaire.liste; 2 liste.options.length = nb_element; 3 for(i=0;i<nb_element;i++){ 4 liste.options[i].value = ....; 5 liste.options[i].text = ...; }
J'ai essayé la même chose pour une liste multiple

Code : Tout sélectionner

<SELECT NAME="liste[]" MULTIPLE></SELECT>
mais il y a une erreur à la ligne 5 :
liste.options a la valeur Null ou n'est pas un objet.
je ne vois pas trop comment m'y prendre....

d0m
Mammouth du PHP | 1141 Messages

30 nov. 2007, 10:37

syntaxe assez étrange mais ca marche :

Code : Tout sélectionner

var liste = document.formulaire.elements['liste[]'];
le nom de la liste est donc un tableau, logique en attribut mais en sytaxe assez étrange.

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

30 nov. 2007, 11:12

La syntaxe n'est pas étrange, dans le dom, "elements" est un tableau contenant l'ensemble des éléments d'un formulaire, tout comme "forms" est un tableau contenant l'ensemble des formulaires d'une page ou "options" un tableau contenant les différentes valeur d'un input de type select ;)

Tu peux ainsi trouver ce genre de syntaxe (qui est d'ailleurs la plus logique à bien y réfléchir) :

Code : Tout sélectionner

document.forms['nomFormulaire'].elements['nomSelect'].options.length
L'intérêt est de pouvoir y déclarer des crochets mais aussi et surtout de pouvoir construire le nom d'un élément dynamiquement comme en php :) :

Code : Tout sélectionner

document.formulaire.elements['select'+ cpt].value
Quant à l'ajout de nouvelles options dans une liste, tu peux également procéder ainsi :

Code : Tout sélectionner

document.formulaire.liste.options[document.formulaire.liste.options.length] = new Option('texte', 'valeur');
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...