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

1148

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 .appendy .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.

0
1791
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
7
  • 3
    @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
    defau1t
    15/01/12 a las 11:32
  • 11
    Tenga en cuenta que también puede dividir la opción / atributo / texto como: .append($("<option></option>").attr("value", '123').text('ABC!') 27/06/2013 a las 21:58
  • 1
    @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, que coincide con 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 ". 1 oct 2015 a las 19:03
  • 1
    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.
    xited
    28/12/15 a las 22:26
  • 3
    @BrockHensley, incluso podrías llegar tan lejos como .append($("<option></option>", {'value':'123'}).text('ABC!') 9/04/2016 a las 21:17
752
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
6
  • 34
    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. 14/10/10 a las 21:11
  • 53
    @DanEsparza te hice un jsperf; empty()resultó más rápido, por supuesto;) jsperf.com/find-remove-vs-empty
    vzwick
    8/04/12 a las 14:12
  • 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: / 7/10/2016 a las 13:42
  • 5
    @ TakácsZsolt Tal vez debería agregar un .val('whatever')al final de la cadena como en la respuesta de Matt. 30/12/2016 a las 17:32
  • .empty () funciona con materialize, mientras que .remove () no funcionó
    user1239087
    30/12/18 a las 23:58
145

¿Por qué no usar simplemente javascript?

document.getElementById("selectID").options.length = 0;
2
  • 8
    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 ...
    Elezar
    4 de agosto de 2016 a las 3:17
  • 4
    ¿No crearía esto una pérdida de memoria? Los elementos de opción ahora son inaccesibles pero aún están asignados. 6/03/19 a las 19:57
90

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();
1
  • 11
    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.
    user1017882
    23/01/15 a las 14:21
82

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

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;
3
  • 6
    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. 4 de enero de 2011 a las 21:41
  • 2
    Este método también resulta ser un poquito (alrededor del 1%) más eficaz : jsperf.com/find-remove-vs-empty
    vzwick
    8/04/12 a las 14:20
  • 3
    +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
    14 de marzo de 2014 a las 10:33
44

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"? Un <select>elemento no puede (legalmente) contener <input type="radio">elementos.

0
27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
2
  • 2
    Todavía estamos usando IE6 y este método no funcionó. Sin embargo, funcionó en FF 3.5.6 31 dic 2009 a las 16:49
  • 3
    podría tener que agregar .change () al final para activar el cambio de selección 1/04/11 a las 9:59
22
$("#control").html("<option selected=\"selected\">The Option...</option>");
0
16

Just one line to remove all options from the select tag and after you can add any options then make second line to add options.

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

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

One more short way but didn't tried

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

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>
9

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()o .find().remove()desde 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 info aquí .

8

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

De otra manera:

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

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

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

  2. 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));
    }
    
0
8
$("#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").

1
  • Si bien esto puede responder a la pregunta, sería mucho más útil si proporcionara una explicación de cómo la responde.
    Nick
    12 oct 2018 a las 10:36
6

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í.

4

Utiliza jquery prop () para borrar la opción seleccionada

$('#mySelect option:selected').prop('selected', false);
1
  • 1
    .prop () solo entra en vigor en jQuery 1.6+. Para jQuery 1.5-, use .attr () 6 de marzo de 2014 a las 12:48
4

Esto reemplazará su mySelect existente con un nuevo mySelect.

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

Puede hacerlo simplemente reemplazando html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
3
  • 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 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>
3

Vi este código en Select2 - Borrar selecciones

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

Este código funciona bien con jQuery incluso sin Select2

1

Espero que funcione

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
1
  • funciona si hay más de la opción, no puedo seleccionar la segunda 31/08/18 a las 10:52
1

Usé javascript vainilla

let select = document.getElementById("mySelect");
select.innerHTML = "";
0
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('');
0

Tratar

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>
0

La respuesta más corta:

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