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

option selected jquery

Question

Quiero configurar 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?

Answer 1

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

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

Esto no funciona

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

Esto hace

Un tiempo de espera funciona pero como @icksde dice que es frágil (en realidad necesitaba 20ms en lugar de 10ms). Es mejor colocarlo 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");
});

Answer 2

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

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

Además, ¿podrías tener dos elementos que tengan la misma identificación?

Answer 3

Esta sería otra opción:

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

Answer 4

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

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

Answer 5

He encontrado que el uso del método jQuery .val () tiene un inconveniente importante.

<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 hay un botón de reinicio usado en el formulario, cuando se hace clic en el botón de reinicio, el valor establecido se borrará y no se restablecerá al valor inicial como esperaría.

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

Answer 6

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 pronto, cuando 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);

Answer 7

Sé que hay varias iteraciones de respuestas, pero ahora esto no requiere jQuery o cualquier otra biblioteca externa y puede lograrse con bastante facilidad 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>

Answer 8

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.

Compruebe si hay errores de sintaxis antes de la llamada.

Answer 9

Yo tuve el mismo problema.

Solución: añadir una actualización.

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

Answer 10

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

Answer 11

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

Answer 12

$(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
});

Answer 13

$(function() {
$("#demo").val(''hello'');
});

Answer 14

// 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'');
});