change - seleccionar option select jquery

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

Question

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

This , this y this son todas respuestas útiles.

Ejemplo de marcado

<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>

Answer 1

Prueba esto

simplemente usa el ID de campo de selección en lugar de #id (es decir, # select_name)

en lugar del valor de la opción, use el valor de la opción seleccionada

 <script>
$(document).ready(function() {
$("#id option[value=''option value'']").attr(''selected'',true);
});
</script>

Answer 2

prueba este nuevo

Exactamente funcionará

<script>
$(document).ready(function() {
$("#id").val(''select value here'');
});
</script>

Answer 3

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

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

Answer 4

Gracias por la pregunta. Espero que este pedazo de código funcione para usted.

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

Answer 5

Hay varias formas de hacer esto, pero el enfoque más limpio se ha perdido entre las mejores respuestas y muchos argumentos sobre val() . También algunos métodos cambiaron a partir de jQuery 1.6, por lo que esto necesita una actualización.

Para los siguientes ejemplos, asumiré que la variable $select es un objeto jQuery que apunta a la etiqueta <select> deseada, por ejemplo, a través de lo siguiente:

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

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

Para la coincidencia 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 de .val() de .val() se implementa en las etiquetas select al establecer la propiedad selected de una option coincidente con el mismo value , por lo que funciona bien 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 ):

por ejemplo, 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 <option> , pero el valor de val no coincide (puede suceder dependiendo de la fuente de los valores), se selecciona "nada" y $select.val() devolverá el null .

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

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

Nota 4 - coincidencia exacta del texto:

Si desea hacer coincidir por texto exacto, puede utilizar un filter con función. por ejemplo, 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 recorte al cheque como en

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

Nota 5 - emparejar por índice

Si desea hacer coincidir por índice, solo indexe los hijos 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 en favor de jQuery hoy en día, al código 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 disparar la nueva selección

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

Para generar el evento de cambio, si es necesario, simplemente agregue una llamada a .change() al objeto de select jQuery. 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 formas de encontrar los elementos utilizando selectores de atributos, como [value="SEL2"] , pero hay que recordar que los selectores de atributos son relativamente lentos en comparación con todas estas otras opciones.

Answer 6

Ninguno de los métodos anteriores proporcionó la solución que necesitaba, así que pensé que proporcionaría lo que funcionó para mí.

$(''#element option[value="no"]'').attr("selected", "selected");

Answer 7

Para Jquery elegido si envía el atributo para funcionar y necesita actualizar la opción de selección

$(''#yourElement option[value="''+yourValue+''"]'').attr(''selected'', ''selected'');
$(''#editLocationCity'').chosen().change();
$(''#editLocationCity'').trigger(''liszt:updated'');

Answer 8

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

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

Para configurar la opción desde un ámbito:

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

Este código utiliza el selector para averiguar el objeto seleccionado con condición, luego cambiar el atributo seleccionado por attr() .

Además, recomiendo agregar un 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.

Answer 9

Podrías nombrar la selección y usar esto:

$("select[name=''theNameYouChose'']").find("option[value=''theValueYouWantSelected'']").attr("selected",true);

Debe seleccionar la opción que desee.

Answer 10

Por valor, lo que me funcionó con jQuery 1.7 fue el siguiente código, intente esto:

$(''#id option[value=theOptionValue]'').prop(''selected'', ''selected'').change();

Answer 11

Puedes usar el método val() :

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

Answer 12

Respondiendo a mi propia pregunta para la documentación. Estoy seguro de que hay otras formas de lograr esto, pero esto funciona y se prueba este código.

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">
$(function() {
$(".update").bind("click", // bind the click event to a div
function() {
var selectOption = $(''.selDiv'').children(''.opts'') ;
var _this = $(this).next().children(".opts") ;
$(selectOption).find("option[index=''0'']").attr("selected","selected");
// $(selectOption).find("option[value=''DEFAULT'']").attr("selected","selected");
// $(selectOption).find("option[text=''Default'']").attr("selected","selected");
// $(_this).find("option[value=''DEFAULT'']").attr("selected","selected");
// $(_this).find("option[text=''Default'']").attr("selected","selected");
// $(_this).find("option[index=''0'']").attr("selected","selected");
}); // END Bind
}); // End eventlistener
</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
</body>
</html>

Answer 13

Si no quieres usar jQuery, puedes usar el siguiente código:

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

Answer 14

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 : tras el comentario de Ryan. Un partido en "Selección 10" podría no ser deseado. No encontré ningún selector que coincida con el texto completo, pero funciona un filter :

 $(''.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 </option> ):

<select ...>
<option value="1">Selection 1
<option value="2''>Selection 2
:

Si simplemente utiliza e.text cualquier espacio en blanco adicional como la nueva línea final, lo que hace que la comparación sea más sólida.

Answer 15

Usando jquery-2.1.4 , encontré la siguiente respuesta que me funcionó:

$(''#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

Answer 16

Utilizo esto, cuando conozco el índice de la lista.

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

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

Answer 17

Voy a ir con: -

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

Answer 18

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

Answer 19

/* This will reset your select box with "-- Please Select --" */
<script>
$(document).ready(function() {
$("#gate option[value='''']").prop(''selected'', true);
});
</script>