¿Cómo eliminas todas las opciones de un cuadro de selección y luego agregas una opción y la seleccionas con jQuery?

Question

¿Cómo eliminas todas las opciones de un cuadro de selección y luego agregas una opción y la seleccionas con jQuery?

Usando core jQuery, ¿cómo eliminas todas las opciones de un cuadro de selección, luego agregas una opción y la seleccionas?

Mi cuadro de selección es el siguiente.

<Select id="mySelect" size="9"> </Select>

EDITAR: El siguiente código fue útil con el encadenamiento. Sin embargo, (en Internet Explorer) .val('whatever') no seleccionó la opción que se agregó. (Usé el mismo 'valor' en ambos .append y .val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

EDITAR: Tratando de que imite este código, utilizo el siguiente código cada vez que se restablece la página / formulario. Este cuadro de selección se completa con un conjunto de botones de opción. .focus() estaba más cerca, pero la opción no apareció seleccionada como lo hace con .selected= "true". No hay nada malo en mi código existente, solo estoy tratando de aprender jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDITAR: la respuesta seleccionada estaba cerca de lo que necesitaba. Esto funcionó para mí:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

Pero ambas respuestas me llevaron a mi solución final.

preguntado el 06 de septiembre de 08 a las 18:09

Jay Corbett

24 Respuestas

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

Respondido 08 Abr '12, 15:04

Mahzilla

Solo por curiosidad, ¿es 'vacío' más rápido que 'encontrar'? Parece que lo sería, porque el 'buscar' usaría un selector y 'vacío' solo haría que la fuerza bruta vacíe el elemento. - Dan Esparza

@DanEsparza te hice un jsperf; empty() resultó más rápido, por supuesto;) jsperf.com/find-remove-vs-empty - vzwick

Tengo un error extraño con esta solución. La parte de llenado está bien, pero cuando intento seleccionar un valor (en mi caso, un día), puedo registrar el valor en la consola, pero el valor que se muestra en el campo de selección permanece en el primer valor ... Puedo no lo resuelvo: / - Takács Zsolt

@ TakácsZsolt Quizás deberías agregar un .val('whatever') al final de la cadena como en la respuesta de Matt. - kodos johnson

.empty () funciona con materialize, mientras que .remove () no funcionó - user1239087

¿Por qué no usar simplemente javascript?

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

Respondido 14 Feb 14, 08:02

Shawn

Estoy de acuerdo en que esta es la solución más simple para eliminar todas las opciones, pero eso solo responde la mitad de la pregunta ... - Elézar

¿No crearía esto una pérdida de memoria? Los elementos de opción ahora son inaccesibles pero aún están asignados. - Synetech

Si su objetivo es eliminar todas las opciones de la selección, excepto la primera (generalmente la opción 'Elija un artículo'), puede usar:

$('#mySelect').find('option:not(:first)').remove();

respondido 27 mar '13, 09:03

mauretto

Esta debería ser la respuesta. Todos los demás eliminaron intencionalmente el primero con el fin de recrearlo después, lo que no me gusta; también implica que también han almacenado la primera opción en algún lugar. - usuario1017882

Tuve un error en IE7 (funciona bien en IE6) donde el uso de los métodos jQuery anteriores borraría el selecciona en el DOM pero no en la pantalla. Usando la barra de herramientas para desarrolladores de IE, pude confirmar que el selecciona había sido borrado y tenía los nuevos elementos, pero visualmente el selecciona todavía mostraba los elementos antiguos, aunque no podía seleccionarlos.

La solución fue usar métodos / propiedades DOM estándar (como lo hizo el póster original) para borrar en lugar de jQuery, aún usando jQuery para agregar opciones.

$('#mySelect')[0].options.length = 0;

Respondido el 11 de enero de 10 a las 09:01

row1

Tuve que usar este método en ie6 también porque .empty () hizo que mi cuadro de selección que estaba contenido en un contenedor oculto se hiciera visible incluso cuando el padre estaba oculto. - Comandante de código

Este método también resulta ser un poco más eficaz (alrededor del 1%): jsperf.com/find-remove-vs-empty - vzwick

+1 este es el más legible (en mi opinión) y en el enlace jsPerf (@vzwick vinculado) la respuesta aceptada fue un 34% más lenta (Opera 20) - Morvael

No estoy seguro de lo que quiere decir con "agregar uno y seleccionarlo", ya que se seleccionará de forma predeterminada de todos modos. Pero, si agregara más de uno, tendría más sentido. ¿Qué tal algo como:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Respuesta a "EDITAR": ¿Puede aclarar lo que quiere decir con "Este cuadro de selección está poblado por un conjunto de botones de opción"? A <select> elemento no puede (legalmente) contener <input type="radio"> elementos.

Respondido el 05 de enero de 19 a las 10:01

Bobby Jack

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

Respondido el 03 de junio de 09 a las 21:06

Hayden Chambers

Todavía estamos usando IE6 y este método no funcionó. Sin embargo, funcionó en FF 3.5.6 - jay corbett

podría tener que agregar .change () al final para activar el cambio de selección - Cámaras de Hayden

$("#control").html("<option selected=\"selected\">The Option...</option>");

respondido 30 mar '11, 03:03

jvarandas

Gracias a las respuestas que recibí, pude crear algo como lo siguiente, que se adapta a mis necesidades. Mi pregunta fue algo ambigua. Gracias por hacer un seguimiento. Mi problema final se resolvió al incluir "seleccionado" en la opción que quería seleccionar.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Respondido 24 ago 16, 12:08

Jay Corbett

Solo una línea para eliminar todas las opciones de la etiqueta de selección y, después, puede agregar cualquier opción, luego haga una segunda línea para agregar opciones.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

Un camino más corto pero no lo intenté

$('.ddlsl').empty().append(new Option('Select all', 'all'));

Respondido el 15 de Septiembre de 20 a las 05:09

Kaushik shrimali

Encontré en la red algo como a continuación. Con miles de opciones como en mi situación, esto es mucho más rápido que .empty() or .find().remove() de jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

MÁS INFORMACIÓN aquí.

Respondido 08 Abr '15, 10:04

marioosh

¿Qué tal simplemente cambiar el html a nuevos datos?

$('#mySelect').html('<option value="whatever">text</option>');

Otro ejemplo:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

Respondido 01 Feb 16, 15:02

Shiv

De otra manera:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Bajo este enlace, hay buenas prácticas https://api.jquery.com/select/

Respondido 13 Jul 17, 17:07

Jhon Intriago Thoth

Primero borre todas las opciones existentes excepto la primera (- Seleccionar--)

Agregue nuevos valores de opción usando el bucle uno por uno

$('#ddlCustomer').find('option:not(:first)').remove();
for (var i = 0; i < oResult.length; i++) {
   $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
}

Respondido 07 ago 17, 13:08

Jaydeep Shil

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

La primera línea de código eliminará todas las opciones de un cuadro de selección, ya que no se ha mencionado ningún criterio de búsqueda de opciones.

La segunda línea de código agregará la opción con el valor especificado ("testValue") y el texto ("TestText").

Respondido 12 Oct 18, 11:10

Dev Chauhan

Si bien esto puede responder a la pregunta, sería mucho más útil si proporcionara una explicación sobre cómo lo responde. - Nick

Sobre la base de la respuesta de mauretto, esto es un poco más fácil de leer y comprender:

$('#mySelect').find('option').not(':first').remove();

Para eliminar todas las opciones excepto una con un valor específico, puede usar esto:

$('#mySelect').find('option').not('[value=123]').remove();

Esto sería mejor si la opción a agregar ya estuviera allí.

Respondido el 18 de junio de 15 a las 14:06

humbads

Usa jquery apuntalar() para borrar la opción seleccionada

$('#mySelect option:selected').prop('selected', false);

Respondido 01 Feb 14, 11:02

mehrdad

.prop () solo entra en vigor en jQuery 1.6+. Para jQuery 1.5-, use .attr () - Ladrón de martillos Agi

Esto reemplazará su mySelect existente con un nuevo mySelect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Respondido 03 ago 15, 08:08

Barun

Puede hacerlo simplemente reemplazando html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

Respondido 04 Oct 16, 01:10

Nadeem Manzoor

guardar los valores de las opciones que se agregarán en un objeto
borrar las opciones existentes en la etiqueta de selección
iterar el objeto de la lista y agregar el contenido a la etiqueta de selección deseada

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

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

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Respondido el 03 de Septiembre de 18 a las 12:09

Nifemi Sola-Ojo

Vi este código en Select2 - Borrar selecciones

$('#mySelect').val(null).trigger('change');

Este código funciona bien con jQuery incluso sin Select2

Respondido 23 Abr '20, 16:04

michael01angelo

Espero que funcione

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

Respondido 23 Oct 16, 05:10

Md. Russel Hussain

Funciona si hay más de la opción No puedo seleccionar la segunda - Anburaj_N

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');

Respondido 19 ago 18, 18:08

LN Nitharsan

Intente

mySelect.innerHTML = `<option selected value="whatever">text</option>`

function setOne() {
  console.log({mySelect});
  mySelect.innerHTML = `<option selected value="whatever">text</option>`;
}

<button onclick="setOne()" >set one</button>
<Select id="mySelect" size="9"> 
 <option value="1">old1</option>
 <option value="2">old2</option>
 <option value="3">old3</option>
</Select>

Respondido 03 ago 20, 21:08

Kamil Kiełczewski

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery html-select option dynamic-html or haz tu propia pregunta.

Matt · Accepted Answer

1761

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

Respondido 17 Oct 08, 03:10

Matt

@nickf: Tengo el mismo problema, pero necesito agregar un conjunto de casillas de verificación en lugar de una en el cambio de menú desplegable, pero mis casillas de verificación provienen de xml. esto no funciona - por defecto1t

Tenga en cuenta que también puede dividir la opción / atributo / texto como: .append($("<option></option>").attr("value", '123').text('ABC!') - brock hensley

@BrockHensley, creo que la verdadera elegancia de esta respuesta es el encadenamiento adecuado en combinación con la función end (). Tu sugerencia también funcionará. De la documentación de la API de jQuery: "La mayoría de los métodos de recorrido de DOM de jQuery operan en una instancia de objeto de jQuery y producen una nueva, haciendo coincidir un conjunto diferente de elementos DOM. Cuando esto sucede, es como si el nuevo conjunto de elementos se empujara a una pila que se mantiene dentro del objeto. Cada método de filtrado sucesivo empuja un nuevo conjunto de elementos a la pila. Si necesitamos un conjunto de elementos más antiguo, podemos usar end () para sacar los conjuntos de la pila ". - Anthony Mason

esta fue la única forma en que pude reconstruir mi menú y cambiar la opción seleccionada en jQuery Mobile en PhoneGap para iOS. También fue necesario actualizar el menú después. - emocionado

@BrockHensley, incluso podrías llegar tan lejos como .append($("<option></option>", {'value':'123'}).text('ABC!') - vahanpwns