Discussion :

[Christophe_]

Bonjour à tous,

Je développe actuellement une page web sur laquelle se trouve deux listes liées.

C'est du classique : lors de l'événement 'change' sur la première liste, on lance une requête AJAX et on remplit la deuxième liste (en passant par innerHTML) avec le contenu de la réponse.

Sous Firefox, tout se passe bien : la deuxième liste se retrouve bien avec un contenu.

Mais sous IE (6 et 7) la deuxième liste reste désespérément vide...

Ce qui m'embête c'est que le système fonctionne à 100 % sous FF.

J'utilise Prototype pour l'AJAX et la gestion des événements.


S'agit-t'il d'un problème connu ?

Je peux poster du code, mais je ne sais pas si ce sera très utile.

J'ai l'impression qu'il faudrait en quelque sort "rafraîchir" la liste déroulante après avoir modifié son contenu avec innerHTML

Si quelqu'un a une piste...

Merci par avance

[E.Bzz]

Bonjour,
problème traité récemment (je retrouve plus la discussion).
La meilleure solution (donc sans innerHTML ) et d'ajouter dans ton select les options récupérées grâce aux instructions adequat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	objListe=document.getElementById('id_liste');
Ajout = new Option(text, value);
objListe.options[objListe.length]=Ajout;

IL faudra avoir vider ta liste auparavant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var objListe = document.getElementById('id_liste');
for (i=objListe.length;i>=0;i--) objListe.options[i]=null;

Si tu veux conserver le fonctionnement innerHTML, pour IE de mémoire, il faut renvoyer aussi les balises <select> (et donc remplacer la totalité de l'objet).
Attention, si c'est dans un form, la solution innerHTML est à proscrire de toutes façons (DOM only) ...

A+

[Christophe_]

Tout d'abord merci pour ta réponse.

En passant par le DOM, le problème est résolu.

Il semblerait que ce soit effectivement "DOM only".

Pour ceux qui se trouvent dans la même situation (vouloir remplir un <select>), la solution passe donc par document.createElement('option') placé dans une boucle puis un appendChild sur le <select> en question