Pregunta ¿Cómo se eliminan todas las opciones de un cuadro de selección y luego se agrega una opción y se selecciona 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ó. (Utilicé el mismo 'valor' en ambos .append y .val.)

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

EDITAR: Tratando de hacer que imite este código, uso el siguiente código cada vez que se restablece la página / formulario. Esta casilla de selección está poblada por 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 problema 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 ...


876
2017-09-06 20:53


origen


Respuestas:


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

1477
2017-09-06 21:01



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

616
2017-12-16 21:07



¿por qué no usar Javascript simple?

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

102
2017-11-13 19:45



Tenía un error en IE7 (funciona bien en IE6) donde el uso de los métodos jQuery anteriores borraría la seleccionar en el DOM pero no en la pantalla. Utilizando IE Developer Toolbar pude confirmar que seleccionar había sido limpiado y tenía los artículos nuevos, pero visualmente el seleccionar todavía mostraba los elementos anteriores, aunque no los podía seleccionar.

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

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

71
2018-01-11 09:22



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

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

67
2018-03-27 09:56



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

23
2018-06-03 20:48



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

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

Respuesta a "EDITAR": ¿Puedes aclarar a qué te refieres con "Esta casilla de selección está poblada por un conjunto de botones de opción"? Un elemento <select> no puede contener (legalmente) elementos <input type = "radio">.


22
2017-09-08 18:51