¿Cómo se selecciona una opción particular en un elemento SELECT en jQuery?

Si conoce el Índice, Valor o Texto. también si no tiene una identificación para una referencia directa.

Esto , esto y esto son todas respuestas útiles.

Ejemplo de marcado

Default Selection 1 Selection 2

Un selector para obtener el elemento de opción medio por valor es

 $('.selDiv option[value="SEL1"]') 

Para un índice:

 $('.selDiv option:eq(1)') 

Para un texto conocido:

 $('.selDiv option:contains("Selection 1")') 

EDITAR : Como se comentó anteriormente, el OP podría haber sido después de cambiar el elemento seleccionado del menú desplegable. En la versión 1.6 y superior, se recomienda el método prop ():

 $('.selDiv option:eq(1)').prop('selected', true) 

En versiones anteriores:

 $('.selDiv option:eq(1)').attr('selected', 'selected') 

EDIT2 : después del comentario de Ryan. Una coincidencia en “Selección 10” podría no ser deseada. No encontré ningún selector para que coincida con el texto completo, pero un filtro funciona:

  $('.selDiv option') .filter(function(i, e) { return $(e).text() == "Selection 1"}) 

EDIT3 : Tenga cuidado con $(e).text() ya que puede contener una nueva línea haciendo que la comparación falle. Esto sucede cuando las opciones están cerradas implícitamente (sin etiqueta ):

  deseada, por ejemplo, a través de lo siguiente: 

 var $select = $('.selDiv .opts'); 

Nota 1 – use val () para las coincidencias de valor:

Para la comparación de valores, usar val() es mucho más simple que usar un selector de atributos: https://jsfiddle.net/yz7tu49b/6/

 $select.val("SEL2"); 

La versión setter de .val() se implementa en tags de select estableciendo la propiedad selected de una option coincidente con el mismo value , por lo que funciona perfectamente en todos los navegadores modernos.

Nota 2 – use prop (‘seleccionado’, verdadero):

Si desea establecer el estado seleccionado de una opción directamente, puede usar prop (no attr ) con un parámetro boolean (en lugar del valor de texto selected ):

eg https://jsfiddle.net/yz7tu49b/

 $option.prop('selected', true); // Will add selected="selected" to the tag 

Nota 3 – permitir valores desconocidos:

Si usa val() para seleccionar una , pero el valor no coincide (puede suceder según el origen de los valores), entonces se selecciona “nada” y $select.val() devolverá null .

Por lo tanto, para el ejemplo que se muestra, y en aras de la solidez, podría usar algo así https://jsfiddle.net/1250Ldqn/ :

 var $select = $('.selDiv .opts'); $select.val("SEL2"); if ($select.val() == null) { $select.val("DEFAULT"); } 

Nota 4 – coincidencia de texto exacta:

Si desea hacer coincidir el texto exacto, puede usar un filter con función. eg https://jsfiddle.net/yz7tu49b/2/ :

 var $select = $('.selDiv .opts'); $select.children().filter(function(){ return this.text == "Selection 2"; }).prop('selected', true); 

aunque si puede tener espacios en blanco adicionales, es posible que desee agregar un borde al cheque como en

  return $.trim(this.text) == "some value to match"; 

Nota 5: coincidencia por índice

Si desea hacer coincidir por índice simplemente indexe los elementos secundarios de la selección, por ejemplo, https://jsfiddle.net/yz7tu49b/3/

 var $select = $('.selDiv .opts'); var index = 2; $select.children()[index].selected = true; 

Aunque tiendo a evitar las propiedades directas de DOM a favor de jQuery hoy en día, a un código a prueba de futuro, por lo que también podría hacerse como https://jsfiddle.net/yz7tu49b/5/ :

 var $select = $('.selDiv .opts'); var index = 2; $select.children().eq(index).prop('selected', true); 

Nota 6 – use change () para activar la nueva selección

En todos los casos anteriores, el evento de cambio no se dispara. Esto es por diseño para que no termines con eventos de cambios recursivos.

Para generar el evento de cambio, si es necesario, simplemente agregue una llamada a .change() al objeto jQuery select . por ejemplo, el primer ejemplo más simple se convierte en https://jsfiddle.net/yz7tu49b/7/

 var $select = $('.selDiv .opts'); $select.val("SEL2").change(); 

También hay muchas otras maneras de encontrar los elementos utilizando selectores de atributos, como [value="SEL2"] , pero debe recordar que los selectores de atributos son relativamente lentos en comparación con todas estas otras opciones.

  $(elem).find('option[value="' + value + '"]').attr("selected", "selected"); 

Respondiendo mi propia pregunta por documentación. Estoy seguro de que hay otras formas de lograr esto, pero esto funciona y este código está probado.

       
Update

Usando jquery-2.1.4 , encontré la siguiente respuesta para que funcione para mí:

 $('#MySelectionBox').val(123).change(); 

Si tiene un valor de cadena, intente lo siguiente:

 $('#MySelectionBox').val("extra thing").change(); 

Otros ejemplos no me funcionaron, por eso agrego esta respuesta.

Encontré la respuesta original en: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

Lo uso cuando conozco el índice de la lista.

 $("#yourlist :nth(1)").prop("selected","selected").change(); 

Esto permite que la lista cambie y activa el evento de cambio. El “: nth (n)” está contando desde el índice 0

Iré con: –

 $("select#my-select option") .each(function() { this.selected = (this.text == myVal); }); 

Para configurar el valor de selección con la activación seleccionada:

 $('select.opts').val('SEL1').change(); 

Para establecer la opción desde un scope:

 $('.selDiv option[value="SEL1"]') .attr('selected', 'selected') .change(); 

Este código usa el selector para descubrir el objeto seleccionado con la condición, luego cambia el atributo seleccionado por attr() .


Además, recomiendo agregar el evento change() después de configurar el atributo a selected , al hacer esto el código se cerrará para cambiar la selección por usuario.

Para Jquery elegido si envía el atributo a la función y necesita actualizar-seleccione la opción

 $('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected'); $('#editLocationCity').chosen().change(); $('#editLocationCity').trigger('liszt:updated'); 
 /* This will reset your select box with "-- Please Select --" */  

Prueba esto

solo usa el id de selección de campo en lugar de #id (es decir, # nombre_de_selección)

en lugar del valor de la opción use su valor de opción de selección

   

El $('select').val('the_value'); se ve la solución correcta y si tiene filas de tabla de datos, entonces:

 $row.find('#component').val('All'); 

si no quiere usar jQuery, puede usar el siguiente código:

 document.getElementById("mySelect").selectedIndex = "2"; 

Gracias por la pregunta. Espero que esta pieza de código funcione para ti.

 var val = $("select.opts:visible option:selected ").val(); 

prueba este nuevo

Exactamente, funcionará