in

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

apple touch icon@2

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

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

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

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

Para igualar valores, use 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 select etiquetas configurando el selected propiedad de una coincidencia option 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 utilizar prop (no attr) con un boolean parámetro (en lugar del valor de texto selected):

p.ej https://jsfiddle.net/yz7tu49b/

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

Nota 3: permita valores desconocidos:

Si utiliza val() para seleccionar un <option>, pero el valor no coincide (puede suceder dependiendo de la fuente de los valores), entonces se selecciona «nada» y $select.val() volverá null.

Entonces, 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. p.ej 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 – coincidencia por índice

Si desea hacer coincidir por índice, simplemente 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 DOM directas a favor de jQuery hoy en día, al 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 disparar la nueva selección

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

Para generar el evento de cambio, si es necesario, simplemente agregue una llamada a .change() a la jQuery select objeto. 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 mediante 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

1632616339 215 loop architecture

VB.Net – Bucles

gfg 200x200 min

Diferencia entre RAM y ROM