¿Cómo borro todas las opciones en un cuadro desplegable?

Mi código funciona en IE pero se rompe en Safari, Firefox y Opera. (gran sorpresa)

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

Después de buscar, aprendí que es lo length=0que no le gusta.
Lo he intentado ...options=nully var clear=0; ...length=clearcon el mismo resultado.

Estoy haciendo esto a varios objetos a la vez, así que estoy buscando un código JS ligero.

Puede usar lo siguiente para borrar todos los elementos.

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

Para eliminar las opciones de un elemento HTML de select, puede utilizar el 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'));

Es importante eliminar el al optionsrevés; como elremove() método reorganiza la optionscolección. De esta manera, ¡se garantiza que el elemento a eliminar aún existe!

Si desea tener un script ligero, entonces elija jQuery. En jQuery, la solución para eliminar todas las opciones será como:

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

Probablemente, no sea la solución más limpia, pero definitivamente es más simple que eliminar uno por uno:

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

Esta es la mejor manera :

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

Este es un camino corto:

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

Una línea, no para, no JQuery, simple.

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

Me gustaría señalar que el problema en la pregunta original ya no es relevante hoy. Y hay una versión aún más corta de esa solución:

selectElement.length = 0;

He probado que ambas versiones funcionan en Firefox 52, Chrome 49, Opera 36, ​​Safari 5.1, IE 11, Edge 18, las últimas versiones de Chrome, Firefox, Samsung Internet y UC Browser en Android, Safari en iPhone 6S, Android 4.2. 2 navegador de valores. Creo que es seguro concluir que es absolutamente compatible con cualquier dispositivo que haya en este momento, por lo que recomiendo este enfoque.

Este es un JavaScript un poco moderno y puro

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

con PrototypeJS :

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

Si está utilizando JQuery y su control de selección tiene ID "DropList", puede eliminar sus opciones de esta manera:

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

En realidad, me funciona con cualquier lista de opciones, como datalist.

Espero eso ayude.

Tenga en cuenta que una selección puede tener tanto la
colección optgroup como las
opciones
como elementos secundarios .

Entonces,

Método 1

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

Método 2

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

Probé, ambos funcionan en Chrome.
Me gusta el método # 1 más simple y anticuado.

Tratar

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

O tal vez busque en la función removeChild ().

O si usas jQuery framework.

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

¡Usar JQuery es una forma más bonita, corta e inteligente de hacerlo!

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

Esto se puede usar para borrar opciones:

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>

Ir en reversa. La razón es que el tamaño disminuye después de cada eliminación.

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, este código te ayudará

Creo que es el mejor sol. es

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

Las soluciones más simples son las mejores, por lo que solo necesita:

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>

Los elementos deben eliminarse a la inversa, de lo contrario, se producirá un error. Además, no recomiendo simplemente establecer los valores en null, ya que eso puede causar un comportamiento inesperado.

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

O si lo prefiere, puede hacerlo una función:

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

El código de la respuesta anterior necesita un ligero cambio para eliminar la lista completa, verifique este fragmento 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;
}

actualice la longitud y eliminará todos los datos de la lista desplegable. Espero que esto ayude a alguien.

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

Si tiene que admitir IE y tiene más de 100 elementos en su lista de selección, le recomiendo que considere reemplazar la selección con una función como esta:

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

El parámetro select debe ser el elemento de un selector jquery o de la llamada document.getElementBy. El único inconveniente de esto es que pierde los eventos que había conectado a la selección, pero puede volver a conectarlos fácilmente cuando se devuelve de la función. Estaba trabajando con una selección que tenía ~ 3k elementos y me tomaría 4 segundos en IE9 borrar la selección para poder actualizarla con el nuevo contenido. Casi instantáneo haciéndolo de esta manera.

Para Vanilla JavaScript hay una manera simple y elegante de hacer esto:

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

Hoy estaba enfrentando el mismo problema, hice lo siguiente mientras recargaba el cuadro de selección. (En llano 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();