Come posso cancellare tutte le opzioni in una casella a discesa?

Il mio codice funziona in IE ma si interrompe in Safari, Firefox e Opera. (grande sorpresa)

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

Dopo aver cercato, ho imparato che è length=0quello che non gli piace.
Ho provato ...options=nulle var clear=0; ...length=clearcon lo stesso risultato.

Lo sto facendo su più oggetti contemporaneamente, quindi sto cercando un codice JS leggero.

È possibile utilizzare quanto segue per cancellare tutti gli elementi.

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

Per rimuovere le opzioni di un elemento HTML di select, è possibile utilizzare il remove()metodo:

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

È importante rimuovere il optionsretro; poiché il remove()metodo riorganizza la optionsraccolta. In questo modo, è garantito che l'elemento da rimuovere esista ancora!

Se desideri avere uno script leggero, scegli jQuery. In jQuery, la soluzione per rimuovere tutte le opzioni sarà simile a:

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

Probabilmente, non è la soluzione più pulita, ma è sicuramente più semplice della rimozione uno a uno:

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

Questo è il modo migliore:

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

Questo è un modo breve:

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

Una riga, no per, no JQuery, semplice.

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

Vorrei sottolineare che il problema nella domanda originale non è più rilevante oggi. E c'è anche una versione più breve di quella soluzione:

selectElement.length = 0;

Ho provato che entrambe le versioni funzionano in Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, ultime versioni di Chrome, Firefox, Samsung Internet e UC Browser su Android, Safari su iPhone 6S, Android 4.2. 2 browser stock. Penso che sia sicuro concludere che è assolutamente compatibile con qualsiasi dispositivo ci sia in questo momento, quindi consiglio questo approccio.

Questo è un po 'moderno e puro JavaScript

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

con PrototypeJS :

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

Se stai usando JQuery e il tuo controllo di selezione ha ID "DropList" puoi rimuovere le sue opzioni in questo modo:

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

In realtà funziona per me con qualsiasi elenco di opzioni, come il datalist.

Spero che sia d'aiuto.

Si noti che una selezione può avere entrambe le
opzioni - optgroup &
- options
come suoi figli.

Così,

Metodo n. 1

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

Metodo n. 2

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

Ho provato, entrambi funzionano su Chrome.
Mi piace il metodo n. 1 più semplice, vecchio stile.

Provare

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

O forse guarda nella funzione removeChild ().

O se usi jQuery framework.

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

Usare JQuery è un modo più carino, più breve e più intelligente di farlo!

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

Questo può essere usato per cancellare le opzioni:

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>

Vai indietro. Il motivo è che le dimensioni diminuiscono dopo ogni rimozione.

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

Spero che questo codice ti aiuti

Penso che sia il miglior sol. è

 $ ( "# Myselectid") html ( ''); 

Le soluzioni più semplici sono le migliori, quindi hai solo bisogno di:

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>

Gli articoli devono essere rimossi al contrario, altrimenti si verificherà un errore. Inoltre, non ho raccomandato semplicemente di impostare i valori su null, poiché ciò potrebbe causare comportamenti imprevisti.

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

O se preferisci, puoi renderlo una funzione:

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

Il codice sopra la risposta richiede una leggera modifica per rimuovere l'elenco completo, si prega di controllare questo pezzo di codice.

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

aggiorna la lunghezza e rimuoverà tutti i dati dall'elenco a discesa. Spero che questo possa aiutare qualcuno.

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

Se devi supportare IE e hai più di 100 articoli nel tuo elenco di selezione, ti consiglio vivamente di considerare di sostituire la selezione con una funzione come questa:

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

Il parametro select dovrebbe essere l'elemento da un selettore jquery o da document.getElementBy call. L'unico aspetto negativo di questo è che si perdono gli eventi che erano stati collegati alla selezione, ma è possibile ricollegarli facilmente quando viene ripristinata la funzione. Stavo lavorando con una selezione che aveva ~ 3k elementi e ci sarebbero voluti 4 secondi su IE9 per cancellare la selezione in modo da poterlo aggiornare con il nuovo contenuto. Quasi istantaneamente farlo in questo modo.

Per Vanilla JavaScript esiste un modo semplice ed elegante per farlo:

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

Oggi stavo affrontando lo stesso problema, ho fatto come di seguito mentre ricarico la casella di selezione. (In 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);

        }

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