Pregunta ¿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.

Esta, esta y esta 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>

588
2017-11-24 16:18


origen


Respuestas:


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é selector para que coincida con el texto completo, pero una filtrar trabajos:

 $('.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 que hace que la comparación falle. Esto sucede cuando las opciones están implícitamente cerradas (no </option> etiqueta):

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

Si simplemente usa e.text se eliminará cualquier espacio en blanco adicional como la línea nueva posterior, lo que hará que la comparación sea más robusta.


1031
2018-05-20 06:38



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");

102
2017-12-01 01:05



Puedes simplemente usar val() método:

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

68
2017-12-02 19:49



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

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

43
2018-05-07 14:14



Usted puede nombrar el seleccionar y usar esto:

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

Debe seleccionar la opción que desee.


12
2018-02-01 17:34



Hay varias formas de hacerlo, pero el enfoque más limpio se ha perdido entre las principales respuestas y un montón de 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é la variable $select es un objeto jQuery apuntando a la deseada <select> etiqueta, p. 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, usando 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 al configurar el selected propiedad de un emparejamiento option con el mismo value, así 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 boolean parámetro (en lugar del valor del texto) selected)

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

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

Nota 3 - permitir valores desconocidos:

Si utiliza val() para seleccionar un <option>, pero el valor de val no coincide (puede suceder según la fuente de los valores), entonces se selecciona "nada" y $select.val() regresará null.

Entonces, para el ejemplo que se muestra, y por el bien de la solidez, podrías 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 de texto exacta:

Si quiere hacer coincidir el texto exacto, puede usar un filter con la 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 borde al cheque como en

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

Nota 5: coincidencia por índice

Si desea hacer coincidir por índice solo indexe los elementos secundarios de la selección, p. 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 jQuery select objeto. p.ej. el primer ejemplo más simple se convierte 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 debe recordar que los selectores de atributos son relativamente lentos en comparación con todas estas otras opciones.


11
2017-09-06 11:50



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

10
2017-12-16 18:17



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.

<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>

9
2017-11-24 16:19



Utilizando 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


7
2018-01-05 14:58