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

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

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

Après la recherche, j’ai appris que ce n’est pas la length=0 .
J’ai essayé ...options=null et var clear=0; ...length=clear var clear=0; ...length=clear avec le même résultat.

Je le fais à plusieurs objects à la fois, donc je cherche un code JS léger.

Vous pouvez utiliser les éléments suivants pour effacer tous les éléments. Notez que

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

Pour supprimer les options d’un object HTML sélectionné, vous pouvez utiliser ce morceau de code:

 function removeOptions(selectbox) { var i; for(i = selectbox.options.length - 1 ; i >= 0 ; i--) { selectbox.remove(i); } } //using the function: removeOptions(document.getElementById("mySelectObject")); 

Cela fonctionnera dans tous les navigateurs. =)

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

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

Probablement pas la solution la plus propre, mais elle est nettement plus simple que de supprimer une à une:

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

C’est la meilleur façon :

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

C’est le moyen le plus court:

 document.getElementById('mySelect').innerText = null 

Une ligne, non pour, pas de JQuery, simple.

 function removeOptions(obj) { while (obj.options.length) { obj.remove(0); } } 

avec PrototypeJS :

 $('yourSelect').select('option').invoke('remove'); 

Si vous utilisez JQuery et que votre contrôle de sélection a l’ID “DropList”, vous pouvez supprimer ses options en procédant de la manière suivante:

 $('#DropList option').remove(); 

En fait, cela fonctionne pour moi avec n’importe quelle liste d’options, comme datalist.

J’espère que cela aide.

Notez qu’une sélection peut avoir les deux
– optgroup &
– collection d’options
comme ses enfants.

Alors,

Méthode n ° 1

 var selectElement = document.getElementById('myselectid'); selectElement.innerHTML = ''; 

Méthode n ° 2

 var selectElement = document.getElementById('myselectid'); selectElement.textContent = ''; 

J’ai testé, les deux fonctionnent sur Chrome.
J’aime la méthode la plus simple, la plus ancienne, la première.

Essayer

 document.getElementsByTagName("Option").length=0 

Ou peut-être regarder dans la fonction removeChild ().

Ou si vous utilisez le framework jQuery.

 $("DropList Option").each(function(){$(this).remove();}); 

Utiliser JQuery est une manière plus jolie, plus courte et plus intelligente de le faire!

 $('#selection_box_id').empty(); 

Aller en arrière. La raison est que la taille diminue après chaque suppression.

 for (i = (len-1); i > -1; i--) { document.getElementById("elementId").remove(i); } 

Je pense que c’est le meilleur sol. est

  $ ("# myselectid"). html (''); 

C’est un peu le JavaScript moderne et pur

document.querySelectorAll('#selectId option').forEach(option => option.remove())

 var select = document.getElementById('/*id atsortingbute of your select here*/'); for (var option in select){ select.remove(option); } 

Le code de réponse ci-dessus nécessite un léger changement pour supprimer la liste complète, veuillez vérifier ce morceau de code.

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

rafraîchir la longueur et il va supprimer toutes les données de la liste déroulante. J'espère que cela aidera quelqu'un.

Les solutions les plus simples sont les meilleures, il vous suffit donc de:

 var list = document.getElementById('list'); while (list.firstChild) { list.removeChild(list.firstChild); } 
  

Cela peut être utilisé pour effacer les options:

 function clearDropDown(){ var select = document.getElementById("DropList"), length = select.options.length; while(length--){ select.remove(length); } } 
   
 while(document.getElementById("DropList").childNodes.length>0) { document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]); } 

Si vous devez prendre en charge IE et que vous avez plus de 100 éléments dans votre liste de sélection, je vous recommande fortement de remplacer le select par une fonction comme suit:

 function clearOptions(select) { var selectParentNode = select.parentNode; var newSelect = select.cloneNode(false); // Make a shallow copy selectParentNode.replaceChild(newSelect, select); return newSelect; } 

Le paramètre select doit être l’élément provenant d’un sélecteur jquery ou d’un appel document.getElementBy. Le seul inconvénient est que vous perdez les événements que vous aviez connectés au serveur sélectionné, mais vous pouvez facilement les rattacher au retour de la fonction. Je travaillais avec un élément qui avait ~ 3k éléments et cela prendrait 4 secondes sur IE9 pour effacer la sélection afin que je puisse le mettre à jour avec le nouveau contenu. Presque instantanément en le faisant de cette façon.

Les éléments doivent être supprimés en sens inverse, sinon cela entraînera une erreur. En outre, je ne recommande pas de définir simplement les valeurs sur null , car cela peut provoquer un comportement inattendu.

 var select = document.getElementById("myselect"); for (var i = select.options.length - 1 ; i >= 0 ; i--) select.remove(i); 

Ou si vous préférez, vous pouvez en faire une fonction:

 function clearOptions(id) { var select = document.getElementById(id); for (var i = select.options.length - 1 ; i >= 0 ; i--) select.remove(i); } clearOptions("myselect"); 
 var select =$('#selectbox').val(); 

Aujourd’hui, j’ai été confronté au même problème, j’ai fait comme ci-dessous tout en rechargeant la boîte de sélection. (Dans Plain JS)

  var select = document.getElementById("item"); select.options.length = 0; var opt = document.createElement('option'); opt.value = 0; opt.innerHTML = "Select Item ..."; opt.selected = "selected"; select.appendChild(opt); for (var key in lands) { var opt = document.createElement('option'); opt.value = lands[key].id; opt.innerHTML = lands[key].surveyNo; select.appendChild(opt); } 

$ (“# yourDDL”). get (0) .options.length = 0;