Listes Liées: vider balise select : innerHTML

Bonjour,


Contexte :
n listes successives de <select> liées en Ajax, non contenues dans un formulaire

Résumé du problème :
Mes balises <select> ne se réinitialisent pas correctement sous IE (fonctionnent ss FFX). Le code généré montre un noeud texte "Selection" avant une balise vide <option></option>, alors que j'ai besoin de <option value="none">Selection</option>

HTML

Code:

---

1 2 3 4 5

<div id="truc"> <select id="subject" onchange="xhr_request(this, readData);"> <option value="none">Selection</option> </select> </div>

---

JS

Code:

---

1 2 3

var oSelect = document.getElementById("subject"); oSelect.innerHTML='<option value="none">Selection</option>'; .. puis je remplis les options ..

---

Yes, j'ai trouvé : en fait la méthode innerHTML n'est pas correcte et encore moins universellement X-browsers (en tous cas IE et FF).

Résumé du problème :
Afin de réinitialiser sa balise <select>, si l'on veut être compatible avec IE et FF actuels, je viens de m'apercevoir qu'il vaut mieux utiliser

Code:

---

1 2	oSelect.options.length = 0; puis créer les options de <select> (plusieurs méthodes selon W3C/IE/NN)

---

que :

Code:

---

oSelect.innerHTML= '<option value="none">Selection</option>';

---

qui fonctionne sous FF mais pas sous IE qui a visiblement une interprétation différente de FF.

Comme c'est ma matinée des grandes découvertes, et que j'ai ramé pour trouver (normal, les découvertes, 1492, ramer ... c'est mauvais, désolé :oops:), je partage :

- Contexte :
n listes successives de <select> liées en Ajax, non contenues dans un formulaire

- Objectifs :
Remplir la liste n+1 des informations contenues dans la dB selon le choix émis par le client dans la liste n
Réinitialiser la liste n+1 sur un nouveau choix de la liste n

- => Comment réinitialiser sa liste <select> suivante ::

Code:

---

1 2 3 4 5 6 7

var oSelect = document.getElementById(balise_select_n_plus_1); oSelect.options.length = 0; oOption = document.createElement("option"); oInner = document.createTextNode("Selection"); oOption.value = "none"; oOption.appendChild(oInner); oSelect.appendChild(oOption);

---

Et ensuite, il n'y a plus qu'à remplir les options de <select> avec les infos récupérées de la dB. (plusieurs méthodes là aussi)

C'est ma méthode, il y a surement mieux, mais celle-ci fonctionne bien sous FF3.5 et IE8.