Imposta l'opzione selezionata della casella di selezione

Question

Desidero impostare un'opzione precedentemente selezionata per essere visualizzata al caricamento della pagina. 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?

Answer 1

Questo sicuramente dovrebbe funzionare. Here's a demo. Assicurarsi di aver inserito il codice in una $(document).ready:

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

Answer 2

che funziona bene. Vedi questo violino: http://jsfiddle.net/kveAL/

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

Inoltre, potresti avere due elementi con lo stesso ID?

Answer 3

$(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 4

Ho riscontrato un problema in cui il valore non è stato 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.

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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 codice è che mi stava caricando la casella di selezione tramite una chiamata AJAX e non appena è stato eseguito la chiamata AJAX che avevo impostato il valore predefinito della casella di selezione

La soluzione

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

Answer 9

Addizione a @icksde e @Korah (thx entrambi!)

Quando si costruisce le opzioni con AJAX la document.ready può essere attivato prima che la lista è costruita, in modo

Questo non funziona

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

Questo fa

un timeout funziona, ma come @icksde dice che è fragile (I ha in realtà bisogno di 20ms in vece di 10ms). È meglio per adattarsi all'interno della funzione AJAX simili:

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

ho trovato utilizzando il metodo jQuery .val() per avere uno svantaggio significativo.

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

Se questa casella di selezione (o qualsiasi altro oggetto di input) è in forma e non v'è un pulsante di reset utilizzato in forma, quando il pulsante di reset viene cliccato il valore impostato andranno cancellato e non ripristinare la valore iniziale come ci si aspetterebbe.

Questo sembra funzionare al meglio per me.

Per Selezionare le caselle

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

Per gli ingressi di testo

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

Per gli ingressi textarea

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

Per le caselle checkbox

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

Answer 11

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

Answer 12

Questa sarebbe un'altra opzione:

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

Answer 13

Ho avuto lo stesso problema.

Soluzione: aggiungere un aggiornamento.

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