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

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

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

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

Je fais cela à plusieurs objets à la fois, donc je recherche du code JS léger.

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;
}

Pour supprimer les options d'un élément HTML de select, vous pouvez utiliser la 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 supprimer le optionsdos; car la remove()méthode réorganise la optionscollection. De cette façon, il est garanti que l'élément à supprimer existe toujours!

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

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

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

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

C'est la meilleur façon :

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

C'est un chemin court:

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

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

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

Je tiens à souligner que le problème de la question initiale n'est plus pertinent aujourd'hui. Et il existe une version encore plus courte de cette solution:

selectElement.length = 0;

J'ai testé que les deux versions fonctionnent dans Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, les dernières versions de Chrome, Firefox, Samsung Internet et UC Browser sur Android, Safari sur iPhone 6S, Android 4.2. 2 navigateur de stock. Je pense qu'il est prudent de conclure qu'il est absolument compatible avec n'importe quel appareil existant actuellement, je recommande donc cette approche.

C'est un JavaScript un peu moderne et pur

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

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 cette façon:

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

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

J'espère que ça aide.

Notez qu'une sélection peut avoir à la fois la collection
- optgroup &
- options
comme 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 n ° 1 la plus simple et à l'ancienne.

Essayer

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

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

Ou si vous utilisez le framework jQuery.

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

Utiliser JQuery est un moyen plus joli, plus court et plus intelligent de le faire!

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

Cela peut être utilisé pour effacer les options:

function clearDropDown(){
  var select = document.getElementById("DropList"),
      length = select.options.length;
  while(length--){
    select.remove(length);
  }
}

<select id="DropList" >
  <option>option_1</option>
  <option>option_2</option>
  <option>option_3</option>
  <option>option_4</option>
  <option>option_5</option>
</select>
<button onclick="clearDropDown()">clear list</button>

Faites marche 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);
}

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

J'espère que ce code vous aidera

Je pense que c'est le meilleur sol. est

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

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);
}

<select id="list">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

Les éléments doivent être supprimés à l'envers, sinon cela provoquera une erreur. En outre, je ne recommande pas simplement de définir 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 = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}

Le code de la réponse ci-dessus nécessite une légère modification 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;
}

actualiser la longueur et il supprimera toutes les données de la liste déroulante. J'espère que cela aidera quelqu'un.

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 d'envisager de remplacer la sélection par une fonction comme celle-ci:

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 issu d'un appel jquery selector ou document.getElementBy. Le seul inconvénient est que vous perdez les événements que vous aviez câblés à la sélection, mais vous pouvez facilement les rattacher lorsqu'ils sont renvoyés hors de la fonction. Je travaillais avec une sélection qui avait ~ 3k éléments et il faudrait 4 secondes sur IE9 pour effacer la sélection afin que je puisse la mettre à jour avec le nouveau contenu. Presque instantanément le faire de cette façon.

Pour Vanilla JavaScript, il existe un moyen simple et élégant de le faire:

for(var o of document.querySelectorAll('#DropList > option')) {
  o.remove()
}

Aujourd'hui, je faisais face au même problème, j'ai fait comme ci-dessous en rechargeant la boîte de sélection. (En clair 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);

        }

var select =$('#selectbox').val();