Discussion :

[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 :

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

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 :

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

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 :

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

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

que :

Code :

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

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 :

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

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.