Listes Liées: vider balise select : innerHTML [Résolu]

[hornetbzz]

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 ..

[hornetbzz]

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é ), 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.