¿Cómo elimina todas las opciones de un cuadro de selección y luego agrega una opción y la selecciona con jQuery?


1077

Usando core jQuery, ¿cómo elimina todas las opciones de un cuadro de selección, luego agrega una opción y la selecciona?

Mi cuadro de selección es el siguiente.

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

EDITAR: El siguiente código fue útil para encadenar. Sin embargo, (en Internet Explorer) .val('whatever')no seleccionó la opción que se agregó. (Utilicé el mismo 'valor' en ambos .appendy .val.)

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

EDITAR: al intentar 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 parecía seleccionada como lo hace con .selected= "true". No hay nada malo con 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.

Respuestas:


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

3
@nickf: Tengo el mismo problema, pero necesito agregar un conjunto de casillas de verificación en lugar de uno al cambiar el menú desplegable, pero mis casillas de verificación provienen de xml. esto no funciona
defecto el

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

1
@BrockHensley, creo que la verdadera elegancia de esta respuesta es el encadenamiento adecuado en combinación con la función end (). Su sugerencia también funcionará. De la documentación de la API de jQuery: "La mayoría de los métodos de desplazamiento DOM de jQuery operan en una instancia de objeto 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 insertara en una pila eso 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 el

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

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

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

34
Solo por curiosidad, ¿está 'vacío' más rápido que 'encontrar'? Parece que sería, porque el 'hallazgo' usaría un selector y 'vacío' simplemente fuerza bruta vaciar el elemento.
Dan Esparza

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

Tengo una falla extraña con esta solución. La parte de rellenar está bien, pero cuando trato de seleccionar un valor (en mi caso un día), puedo consolar el valor de registro, pero el valor que se muestra en el campo de selección permanece en el primer valor ... Puedo No lo resuelvas: /
Takács Zsolt

55
@ 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ó
OverlordvI

127

¿Por qué no usar JavaScript simple?

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

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

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

1
Llano viejo JS FTW (para la victoria) !!! :)
raddevus

78

Si su objetivo es eliminar todas las opciones de la selección, excepto la primera (por lo general, la opción "Elija un elemento") puede usar:

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

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

76

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

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

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

66
Tuve que usar este método también en ie6 porque .empty () hizo que mi cuadro de selección contenido en un contenedor oculto se volviera visible incluso mientras el padre estaba oculto.
Code Commander el

2
Este método también resulta ser un poquito (alrededor del 1%) más eficiente
vzwick

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

35

No estoy seguro exactamente a qué se refiere con "agregar uno y seleccionarlo", ya que de todos modos se seleccionará de manera predeterminada. Pero, si tuviera que agregar 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 se completa con un conjunto de botones de opción"? Un <select>elemento no puede (legalmente) contener <input type="radio">elementos.


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

2
Todavía estamos usando IE6 y este método no funcionó. Sin embargo, funcionó en FF 3.5.6
Jay Corbett

3
podría tener que agregar .change () al final para activar el cambio de selección
Hayden Chambers

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

12

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 seguirnos. Mi problema final se resolvió incluyendo "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>


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

7

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 información aquí .



7
$("#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").


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

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 para agregar ya estuviera allí.


4

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

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

1
.prop () solo entra en vigor en jQuery 1.6+. Para jQuery 1.5-, use .attr ()
Agi Hammerthief

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

Puedes hacerlo simplemente reemplazando html

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

4

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

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

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

2
  • 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>



1

Espero que funcione

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

funciona si más de la opción no puedo seleccionar la segunda
Anburaj_N

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('');
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.