Manière la plus efficace d'effacer une liste d'options d'un select

Marsh Posté le 25-07-2006 à 14:35:31

Voilà, tout est dans le titre :

soit un :

Code :

<select id="id-select-test">
<option value="zobi zobi !">kikou !</option>
<option value="1">10</option>
<option value="2">20</option>
<option value="3">30</option>
</select>

Les options peuvent sans problèmes être créées de la manière suivante :

Code :

var option_supplementaires = document.createElement("option" );
option_supplementaires.appendChild(document.createTextNode('kikou !'));
option_supplementaires.value = 'zobi zobi !';
document.getElementById('id-select-test').appendChild(option_supplementaires);

Ma question :

Comment supprimer toutes les options de 'id-select-test' ? Solution DOM uniquement.

Merci

Reply

Marsh Posté le 25-07-2006 à 14:35:31

Reply

Marsh Posté le 25-07-2006 à 14:48:42

Allez deux solutions pour le coup
Avec removeChild ( pas ma préféré, vu que t'es obligé de te coltiner un boucle):

Code :

var opt = document.getElementById('a').getElementsByTagName('option');
for(var j=opt.length-1; j>=0; j--){
document.getElementById('a').removeChild(opt[j]);
}

Note: attention, tu es obligé de faire une boucle en --, car opt est une référence sur le getElementsByTagName, donc chaque fois que tu fais un removeChild sa length diminue.

Avec replaceNode et CloneNode ( beaucoup plus joli):

Code :

var selNode = document.getElementById('a');
selNode.parentNode.replaceChild(selNode.cloneNode(false), selNode);

le false dans cloneNode précise qu'il ne faut pas copier ses enfants.

Message cité 1 fois

Reply

Marsh Posté le 25-07-2006 à 15:01:19

Je ne comprends pas très bien cette manie de vouloir tout faire en DOM.

Le (X)HTML se démarque du XML par la présence d'objets métiers. Je pense que ce n'est pas un luxe que de les utiliser, si ?

Ils sont là justement pour que :
1/ Le code soit plus lisible
2/ Qu'on ne puisse pas se retrouver avec des Options dans un checkbox
3/ Vérifier la cohérence des éléments modifiés par JS

Sans compter qu'ils sont censés être plus efficaces que la manipulation DOM en terme de performances...
Comprend pas.

http://www.w3schools.com/js/tryit. [...] ect_remove

Avec ce code :

Code :

function removeOption()
{
var x=document.getElementById("mySelect" )
while (x.length > 0)
x.remove(0);
}

Message cité 1 fois
Message édité par Arjuna le 25-07-2006 à 15:06:57

Reply

Marsh Posté le 25-07-2006 à 15:03:26

Arjuna a écrit :

Je ne comprends pas très bien cette manie de vouloir tout faire en DOM.

On en reparlera dans quelques années.

Message cité 1 fois

Reply

Marsh Posté le 25-07-2006 à 15:06:49

anapajari a écrit :

Avec replaceNode et CloneNode ( beaucoup plus joli):

Code :

var selNode = document.getElementById('a');
selNode.parentNode.replaceChild(selNode.cloneNode(false), selNode);

le false dans cloneNode précise qu'il ne faut pas copier ses enfants.

:jap: :jap: Très bon et très pratique. Merci bcp.

Une surprise vous attend pour bientôt sur ce forum... (je n'en dit pas plus pour le moment).

Reply

Marsh Posté le 25-07-2006 à 15:09:38

Hermes le Messager a écrit :

On en reparlera dans quelques années.

C'est tout vu.

En C++ aussi on peut travailler uniquement avec des pointeurs nons typés, et lancer des méthodes en bidouillant à une adresse mémoire.

Pourtant, on a misen place des conceptes complexes comme l'héritage et la dérivation afin de justement, avoir des variables typées de façon la plus proche de leur contenu.

Là, on est en train de faire un retour en arrière. Tout est de type "xmlnode", on sait pas ce qu'on fait ni dans quoi, et au final, moi je préconise qu'on travaille ligne par ligne en mode texte, vous verrez c'est encore plus souple pour programmer.

Reply

Manière la plus efficace d'effacer une liste d'options d'un select

Sujets relatifs:

Leave a Replay