Como limpo todas as opções em uma caixa suspensa?

Meu código funciona no IE, mas quebra no Safari, Firefox e Opera. (grande surpresa)

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

Depois de pesquisar, aprendi que é o length=0que não gosta.
Eu tentei ...options=nulle var clear=0; ...length=clearcom o mesmo resultado.

Estou fazendo isso com vários objetos ao mesmo tempo, por isso estou procurando algum código JS leve.

Você pode usar o seguinte para limpar todos os elementos.

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

Para remover as opções de um elemento HTML de select, você pode utilizar o remove()método:

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 remover o optionscontrário; como o remove()método reorganiza a optionscoleção. Dessa forma, é garantido que o elemento a ser removido ainda exista!

Se você deseja ter um script leve, vá para o jQuery. No jQuery, a solução para remover todas as opções será:

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

Provavelmente, não é a solução mais limpa, mas é definitivamente mais simples do que remover um por um:

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

Esta é a melhor maneira:

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

Esta é uma maneira curta:

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

Uma linha, sem, sem JQuery, simples.

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

Gostaria de salientar que o problema na pergunta original não é mais relevante hoje. E há uma versão ainda mais curta dessa solução:

selectElement.length = 0;

Testei que ambas as versões funcionam no Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, versões mais recentes do Chrome, Firefox, Samsung Internet e UC Browser no Android, Safari no iPhone 6S, Android 4.2. 2 navegador de ações. Eu acho que é seguro concluir que é absolutamente compatível com qualquer dispositivo existente no momento, por isso recomendo essa abordagem.

Este é um pouco de JavaScript moderno e puro

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

com PrototypeJS :

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

Se você estiver usando JQuery e seu controle de seleção tiver o ID "DropList", você poderá remover suas opções da seguinte maneira:

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

Na verdade, ele funciona para mim com qualquer lista de opções, como datalist.

Espero que ajude.

Observe que um select pode ter as duas
coleções - optgroup &
- options
como seus filhos.

Assim,

Método 1

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

Método # 2

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

Eu testei, ambos funcionam no Chrome.
Gosto do método mais simples e antiquado nº 1.

Experimentar

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

Ou talvez veja a função removeChild ().

Ou se você usa a estrutura jQuery.

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

Usar o JQuery é uma maneira mais bonita, mais curta e inteligente de fazer isso!

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

Isso pode ser usado para limpar as opções:

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>

Vá para trás. A razão é que o tamanho diminui após cada remoção.

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

Espero que este código o ajude

Eu acho que é o melhor sol. é

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

As soluções mais simples são as melhores, então você só precisa 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>

Os itens devem ser removidos ao contrário, caso contrário, causará um erro. Além disso, não recomendo simplesmente definir os valores nullcomo, pois isso pode causar um comportamento inesperado.

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

Ou, se preferir, você pode torná-lo uma função:

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

O código da resposta acima precisa de uma pequena alteração para remover a lista completa. Verifique este trecho de código.

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

atualize o comprimento e removerá todos os dados da lista suspensa. Espero que isso ajude alguém.

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

Se você precisar oferecer suporte ao IE e tiver mais de 100 itens em sua lista de seleção, recomendo fortemente que você substitua o select por uma função da seguinte maneira:

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

O parâmetro select deve ser o elemento de um seletor de jquery ou chamada de document.getElementBy. A única desvantagem disso é que você perde os eventos que você havia ligado até o select, mas pode facilmente anexá-los novamente à medida que ele volta à função. Eu estava trabalhando com um select que tinha ~ 3k itens e levaria 4 segundos no IE9 para limpar o select para que eu pudesse atualizá-lo com o novo conteúdo. Quase instantaneamente fazê-lo dessa maneira.

Para o Vanilla JavaScript, existe uma maneira simples e elegante de fazer isso:

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

Hoje eu estava enfrentando o mesmo problema, fiz como abaixo ao recarregar a caixa de seleção. (Na planície 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();