Usando el núcleo de jQuery, ¿cómo se eliminan todas las opciones de una caja de selección, y luego se añade una opción y se selecciona?
Mi caja de selección es la siguiente.
<Select id="mySelect" size="9"> </Select>
EDIT: El siguiente código me sirvió para encadenar. Sin embargo, (en Internet Explorer) .val('lo que sea')
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');
EDIT: Intentando que imite este código, uso el siguiente código cada vez que se reinicia la página/formulario. Esta caja de selección está poblada por un conjunto de botones de radio. .focus()
estaba más cerca, pero la opción no aparecía seleccionada como lo hace con .selected= "true"
. No hay nada malo con mi código existente - Sólo 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";
EDIT: 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..
No estoy seguro de lo que quiere decir exactamente con "añadir uno y seleccionarlo", ya que será seleccionado por defecto de todos modos. Pero, si usted fuera a añadir 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": ¿Puedes aclarar lo que quieres decir con "Esta caja de selección está poblada por un conjunto de botones de radio"? Un elemento <select>
no puede contener (legalmente) elementos `<input type="radio".
Gracias a las respuestas que he recibido, he podido crear algo como lo siguiente, que se ajusta a mis necesidades. Mi pregunta era algo ambigua. Gracias por el seguimiento. Mi problema final se solucionó incluyendo "selected" en la opción que quería seleccionar.
begin snippet: js hide: false console: true babel: false -->
$(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>
Fin del fragmento;