Comment effacer toutes les options d'une liste déroulante ?

Question

Mon code fonctionne dans IE mais se casse dans Safari, Firefox et Opera. (grosse surprise)

document.getElementById("DropList").options.length=0;

Après avoir cherché, j'ai appris que c'est la length=0 qu'il n'aime pas.
J'ai essayé ...options=null et var clear=0; ...length=clear avec le même résultat.

Je fais cela sur plusieurs objets à la fois, donc je cherche un code JS léger.

Answer 1

Pour supprimer les options d'un élément HTML de select vous pouvez utiliser le remove() méthode :

function removeOptions(selectElement) {
   var i, L = selectElement.options.length - 1;
   for(i = L; i >= 0; i--) {
      selectElement.remove(i);
   }
}

// using the function:
removeOptions(document.getElementById('DropList'));

Il est important de retirer le options en arrière ; comme le remove() réorganise la méthode options collection. De cette façon, il est garanti que l'élément à retirer existe toujours !

Answer 2

Si vous souhaitez avoir un script léger, alors optez pour jQuery. Dans jQuery, la solution pour supprimer toutes les options sera comme :

$("#droplist").empty();

Answer 3

Ce n'est sans doute pas la solution la plus propre, mais c'est certainement plus simple que de les supprimer un par un :

document.getElementById("DropList").innerHTML = "";

Answer 4

C'est le meilleur moyen :

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}

Answer 5

Vous pouvez utiliser ce qui suit pour effacer tous les éléments.

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
  select.options[i] = null;
}