¿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

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