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

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?

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

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

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

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

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

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?

Esta sería otra opción:

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

Yo tuve el mismo problema.

Solución: agregue una actualización.

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

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>

Algunos casos pueden ser

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

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

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.

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

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

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