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?

Voto a favor
fuente
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');
});
Darin Dimitrov
fuente
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
});
Zkoh
fuente
37

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

Marty Hirsch
fuente
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);
Miguel
fuente
12
  $("#form-field").val("5").trigger("change");
Mohd Bashir
fuente
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?

James Wiseman
fuente
6

Esta sería otra opción:

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

Yo tuve el mismo problema.

Solución: agregue una actualización.

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');
Al corriente
fuente
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>

SyWill
fuente
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);
hemil
fuente
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);
Coré
fuente
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.

Howard
fuente
44
Tan útil como recordar que verifique si hay errores de sintaxis, esta no es una respuesta.
Shotgun Ninja
-1
$(function() {
$("#demo").val('hello');
});
Gaurav Rai
fuente
-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');
});
Ronnel Castillo Ocampo
fuente
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");
});
Cor Koomen
fuente