Imposta l'opzione selezionata della casella di selezione

Voglio impostare un'opzione che è stata selezionata in precedenza per essere visualizzata al caricamento della pagina. L'ho provato con il seguente codice:

$("#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>

Ma questo non funziona. Qualche idea?

Questo sicuramente dovrebbe funzionare. Ecco una demo . Assicurati di aver inserito il codice in un $(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);

Ho scoperto che usando il metodo jQuery .val () si ha un inconveniente significativo.

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

Se questa casella di selezione (o qualsiasi altro oggetto di input) è in un modulo e viene utilizzato un pulsante di ripristino nel modulo, quando si fa clic sul pulsante di ripristino, il valore impostato verrà cancellato e non ripristinato al valore iniziale come previsto.

Questo sembra funzionare al meglio per me.

Per le caselle Seleziona

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

Per input di testo

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

Per input textarea

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

Per caselle di controllo

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

Per i pulsanti di opzione

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

Funziona benissimo. Vedi questo violino: http://jsfiddle.net/kveAL/

È possibile che tu debba dichiarare il tuo jQuery in un $(document).ready()gestore?

Inoltre, potresti avere due elementi con lo stesso ID?

Questa sarebbe un'altra opzione:

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

Ho avuto lo stesso problema.

Soluzione: aggiungere un aggiornamento.

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

So che ci sono diverse iterazioni di risposte, ma ora questo non richiede jquery o qualsiasi altra libreria esterna e può essere realizzato abbastanza facilmente solo con quanto segue.

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>

Alcuni casi potrebbero essere

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

Il mio problema

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

Ho avuto lo stesso problema. L'unica differenza dal tuo codice è che stavo caricando la casella di selezione tramite una chiamata ajax e non appena la chiamata ajax è stata eseguita, ho impostato il valore predefinito della casella di selezione

La soluzione

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

Ho avuto un problema in cui il valore non era impostato a causa di un errore di sintassi prima della chiamata.

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

Verificare la presenza di errori di sintassi prima della chiamata.

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

Aggiunta a @icksde e @Korah (grazie entrambi!)

Quando si creano le opzioni con AJAX, è possibile che il documento sia già attivato prima della creazione dell'elenco, quindi

Questo non funziona

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

Questo fa

Un timeout funziona ma come dice @icksde è fragile (in realtà avevo bisogno di 20 ms invece di 10 ms). È meglio inserirlo nella funzione AJAX in questo modo:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});