Establecer la opción seleccionada del cuadro de selección


352

Quiero establecer una opción que se seleccionó previamente para que se muestre en la carga de la página. Lo probé con el siguiente código:

$("#gate").val('Gateway 2');

con

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

Pero esto no funciona. ¿Algunas ideas?


10
En realidad así es como debería funcionar, ¿está seguro de establecer el valor en document.ready ()? Tal vez el código se ejecuta cuando el cuadro de selección aún no está listo.
Morph

Respuestas:


496

Esto definitivamente debería funcionar. Aquí hay una demostración . Asegúrese de haber colocado su código en $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

44
ok, cuando
desplego

2
ahh lo declare no en la función de documento listo ... ¡gracias!
Voto a favor del

77
No es tan bueno como establecer el atributo "seleccionado" en "seleccionado".
Adal

66
@Adal ¿Por qué esto no es tan bueno como establecer el atributo 'seleccionado' en 'seleccionado'?
Shawn

26
En caso de que alguien más se pregunte, lo que se 'Gateway 2'pasa a la función valcoincide con el valor del valueatributo de la opción de selección, no con su texto. Vea este JSFiddle , que es una versión ligeramente editada de la demostración de Darin, como un ejemplo de lo que quiero decir.
Kenny Evitt

166
$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

37

$('#gate').val('Gateway 2').prop('selected', true);


2
Muy similar a lo $('#your-select-box-id :nth-child(2)').prop('selected', true)que funciona, con actualización visual del cuadro desplegable.
Big Rich el

Solo uno que funcionó para mí. Sospechoso porque estoy usando una biblioteca de selección personalizada.
Louis M.

15

He encontrado que usar el método jQuery .val () tiene un inconveniente significativo.

<select id="gate"></select>
$("#gate").val("Gateway 2");

Si este cuadro de selección (o cualquier otro objeto de entrada) está en un formulario y se usa un botón de reinicio en el formulario, cuando se hace clic en el botón de reinicio, el valor establecido se borrará y no se reiniciará al valor inicial como era de esperar.

Esto parece funcionar mejor para mí.

Para cuadros seleccionados

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

Para entradas de texto

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

Para entradas de área de texto

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

Para casillas de verificación

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

Para botones de radio

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

12
  $("#form-field").val("5").trigger("change");

1
Hubiera sido bueno si incluyeras alguna información sobre esto. Este es un gran ejemplo de cómo DEBE hacer esto, SI tiene un código que está buscando cambios en la selección.
sean.boyer

6

Eso funciona bien Vea este violín: http://jsfiddle.net/kveAL/

¿Es posible que necesite declarar su jQuery en un $(document).ready()controlador?

Además, ¿podría tener dos elementos que tengan la misma ID?


6

Esta sería otra opción:

$('.id_100 option[value=val2]').prop('selected', true);

6

Yo tuve el mismo problema.

Solución: agregue una actualización.

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

3
esto es solo para jqueryui selectmenu, no html estándar
stuartdotnet

3

Sé que hay varias iteraciones de respuestas, pero ahora esto no requiere jquery ni ninguna otra biblioteca externa y se puede lograr de manera bastante sencilla con lo siguiente.

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>


Gran solución. pero parece que no elimina el atributo seleccionado de las opciones seleccionadas anteriormente
Systems Rebooter

3

Algunos casos pueden ser

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

1

Mi problema

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

Tuve el mismo problema La única diferencia con su código es que estaba cargando el cuadro de selección a través de una llamada ajax y tan pronto como se ejecutó la llamada ajax había establecido el valor predeterminado del cuadro de selección

La solución

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

1
analizó el problema correctamente, pero la solución es mala y frágil. debe usar una función de devolución de llamada adjunta a su llamada ajax
icksde

-1

Tuve un problema donde el valor no se estableció debido a un error de sintaxis antes de la llamada.

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

Verifique si hay errores de sintaxis antes de la llamada.


44
Tan útil como recordar que verifique si hay errores de sintaxis, esta no es una respuesta.
Shotgun Ninja


-2
// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

1
Esto pasará incluso más allá del valor seleccionado, que es ineficiente
Daniel Nuriyev

Además, .attr()ha sido la forma incorrecta de hacerlo desde mucho antes de que se publicara esta respuesta.
Auspex

-2

Adición a @icksde y @Korah (¡gracias a ambos!)

Al compilar las opciones con AJAX, el documento. Ready puede activarse antes de que se construya la lista, por lo que

Esto no funciona

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

Esto hace

Un tiempo de espera funciona, pero como dice @icksde es frágil (en realidad necesitaba 20 ms en lugar de 10 ms). Es mejor ajustarlo dentro de la función AJAX de esta manera:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.