[Javascript] ¿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?


Answers

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

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




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

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



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



Basándose en la respuesta de Mauretto, 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 estaba allí.




¿Qué tal si simplemente cambias 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>
');



Tuve un error en IE7 (funciona bien en IE6) donde el uso de los métodos jQuery anteriores borrará la selección en el DOM pero no en la pantalla. Utilizando la barra de herramientas de IE Developer pude confirmar que la selección se ha borrado y tenía los nuevos elementos, pero visualmente el select aún mostraba los elementos anteriores, aunque no se podían 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;



Esto reemplazará su mySelect existente con un nuevo mySelect.

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



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



Espero que funcione

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