web-dev-qa-db-fra.com

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

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

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

Après avoir cherché, j'ai appris que c'est le 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 pour plusieurs objets à la fois et je recherche donc un code JS léger.

javascripthtml-select
105
Kirt

Vous pouvez utiliser ce qui suit 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;
}
30
Nick Craver

Pour supprimer les options d'un objet 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. =)

238
Fabiano

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

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

Probablement pas la solution la plus propre, mais c’est bien plus simple que de supprimer un à un:

document.getElementById("DropList").innerHTML = "";
81
Dmitry Shintyakov

C'est la meilleur façon :

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

C'est le moyen le plus court:

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

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

21
Firemen26
function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}
14
Julio Garcia

Si vous utilisez JQuery et que votre contrôle de sélection possède l'ID "DropList", vous pouvez supprimer ses options 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. 

6
norgematos

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 et la plus ancienne, n ° 1.

6
Manohar Reddy Poreddy

avec PrototypeJS :

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

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

$('#selection_box_id').empty();
4
Sobin Sunny

Essayer

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

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

Ou si vous utilisez le cadre jQuery.

$("DropList Option").each(function(){$(this).remove();});
4
Razor Storm
var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i].remove();
}

Espérons que ce code vous aidera

3
user11441779

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>

3
Vichu

Allez 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);
}
2
Dinesh Khetarpal

Je pense que c'est le meilleur sol. est 

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

2
Ossama Zakaria

Les éléments doivent être supprimés à l'envers, sinon cela provoquerait une erreur. En outre, je ne recommande pas simplement de définir les valeurs sur null, car cela pourrait entraîner 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");
1
Dan Bray

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>

1
nitka.pawel

Au-dessus du code de la réponse, un léger changement est nécessaire pour supprimer la liste complète. Veuillez vérifier ce code.

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

actualise la longueur et toutes les données de la liste déroulante seront supprimées. J'espère que cela aidera quelqu'un.

1
NoNaMe

J'aimerais 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 fonctionnaient sous 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, navigateur de stock Android 4.2.2. Je pense qu'il est prudent de conclure que c'est absolument compatible avec tout appareil actuel, alors je recommande cette approche.

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

Si vous devez prendre en charge IE et que votre liste de sélection contient plus de 100 éléments, je vous recommande vivement 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 d'un appel de sélecteur jquery ou de document.getElementBy. Le seul inconvénient, c’est que vous perdez les événements que vous aviez connectés à la sélection, mais vous pouvez facilement les rattacher à mesure qu’ils sont renvoyés hors de la fonction. Je travaillais avec un élément sélectionné contenant environ 3 000 éléments. Il fallait 4 secondes sous IE9 pour effacer l'élément sélectionné et pouvoir le mettre à jour avec le nouveau contenu. Presque instantanément, le faire de cette façon.

0
Dan
while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}
0
user1910893