¿Cómo usar jQuery para seleccionar una opción desplegable?

157

Me preguntaba si es posible hacer que jQuery seleccione un <option>, digamos el cuarto elemento, en un cuadro desplegable.

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Quiero que el usuario haga clic en un enlace, luego haga que el <select>cuadro cambie su valor, como si el usuario lo hubiera seleccionado haciendo clic en <option>.

punteado
fuente
44
¿Sus opciones tienen un valor?
Victor

Respuestas:

184

Qué tal si

$('select>option:eq(3)').attr('selected', true);

ejemplo en http://www.jsfiddle.net/gaby/CWvwn/


para versiones modernas de jquery deberías usar el en .prop()lugar de.attr()

$('select>option:eq(3)').prop('selected', true);

ejemplo en http://jsfiddle.net/gaby/CWvwn/1763/

Gabriele Petrioli
fuente
3
OMI, esto ni siquiera debería funcionar; el estado seleccionado de una opción debe
activarse
1
selectElement.selectedIndex = index;es lo que quiere decir Jack.
rlemon
@rlemon, entiendo, pero selectedIndexno se puede usar para la selección múltiple cuando multiplese usa el atributo. Y la forma normal ( html ) de establecer elementos seleccionados es el selectedatributo de los optionelementos.
Gabriele Petrioli
@ GabyakaG.Petrioli La forma normal es en realidad establecer la selectedpropiedad de cada optionselemento correspondiente a true(y opcionalmente el resto falseexplícitamente). Las selecciones múltiples son bastante desagradables en realidad :)
Ja͢ck el
66
@sunnyiitkgp el onchangeevento nunca se activa cuando el valor se cambia programáticamente. Puede agregar un .trigger('change')al final para disparar también el evento ( aunque se disparará independientemente del valor que haya cambiado )
Gabriele Petrioli
149

La solución:

$("#element-id").val('the value of the option');
Harold Sota
fuente
2
no establece la selectedopción en el HTML.
Ahmad hamza
54

Los elementos de selección HTML tienen una selectedIndexpropiedad en la que se puede escribir para seleccionar una opción en particular:

$('select').prop('selectedIndex', 3); // select 4th option

Usando JavaScript simple, esto se puede lograr mediante:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;
Jack
fuente
77
Esta debería ser la respuesta aceptada ... Parece la solución más sana y limpia ...
Denys Séguret
1
El problema es que no dispara un evento 'onchange'.
Guy Korland
2
@GuyKorland Esto sucede con ninguna de las otras respuestas, como se demuestra aquí ; Si desea que se active un evento, debe hacerlo manualmente.
Ja͢ck
1
@ Jack ¿Hay un camino corto? La única forma en que encontré: var fireEvent = function (selectElement) {if (selectElement) {if ("fireEvent" en selectElement) {selectElement.fireEvent ("onchange"); } else {var evt = document.createEvent ("HTMLEvents"); evt.initEvent ("cambio", falso, verdadero); selectElement.dispatchEvent (evt); }}}
Guy Korland
44
@GuyKorland jQuery expone .trigger()eso, pero como ya está haciendo esto con código, también sería fácil llamar a los manejadores de cambios usted mismo.
Ja͢ck
30

Lo haría de esta manera

 $("#idElement").val('optionValue').trigger('change');
franzisk
fuente
3
esta debe ser la respuesta seleccionada
Uzumaki Naruto
2
$ ("# idElement"). val ('optionValue'). change () también podría funcionar
Ullullu
24

Si sus opciones tienen un valor, puede hacer esto:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' sería la identificación de su selección o un selector de clase. o si solo hay una selección, puede usar la etiqueta como está en el ejemplo.

Víctor
fuente
2
Eso es exactamente lo que necesitaba. Gracias.
chapman84
23

La forma más fácil es la val(value)función:

$('select').val(2);

Y para obtener el valor seleccionado no das argumentos:

$('select').val();

Además, si tienes <option value="valueToSelect">...</option>, puedes hacer:

$('select').val("valueToSelect");

MANIFESTACIÓN

Ionică Bizău
fuente
También funcionó $ ('# SelectCtrlId'). Val ('ValueToSelect');
Sai
9

Use el siguiente código si desea seleccionar una opción con un valor específico:

$('select>option[value="' + value + '"]').prop('selected', true);
nlareu
fuente
$ ('seleccionar'). val (valor); ¿Por qué tan serio? ;)
Zeeshan
1
@Zee El código respondido también permite múltiples selecciones.
Azghanvi
5
 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);
Mamun Rasid
fuente
3

Prefiero nth-child () a eq () ya que usa indexación basada en 1 en lugar de 0, lo que es un poco más fácil para mi cerebro.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);
Lee D
fuente
El "índice basado en 1" es mejor cuando se manipulan cosas con fechas. Me salva de muchos problemas. Gracias.
TCB13
3

Con el elemento '' usualmente usamos el atributo 'value'. Será más fácil configurar entonces:

$('select').val('option-value');
Savaratkar
fuente
3

Prueba esto:

$('#mySelectElement option')[0].selected = true;

¡Saludos!

Nicolas Finelli
fuente
2

responde con id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);
Javad Masoumi
fuente
1
 $('select>option:eq(3)').attr('selected', 'selected');

Una advertencia aquí es que si tiene la observación de JavaScript para el evento de cambio de selección / opción, debe agregar .trigger('change')para que el código se convierta.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

porque solo llamar .attr('selected', 'selected')no desencadena el evento

kanitw
fuente