Définir l'option sélectionnée de la case de sélection

Je veux définir une option qui a été sélectionnée précédemment pour être affichée lors du chargement de la page. Je l'ai essayé avec le code suivant:

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

avec

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

Mais cela ne fonctionne pas. Des idées?

Cela devrait certainement fonctionner. Voici une démo . Assurez-vous d'avoir placé votre code dans $(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);

J'ai trouvé que l'utilisation de la méthode jQuery .val () avait un inconvénient important.

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

Si cette case de sélection (ou tout autre objet d'entrée) est dans un formulaire et qu'un bouton de réinitialisation est utilisé dans le formulaire, lorsque vous cliquez sur le bouton de réinitialisation, la valeur définie sera effacée et ne sera pas réinitialisée à la valeur de début comme vous vous y attendez.

Cela semble fonctionner le mieux pour moi.

Pour les cases Select

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

Pour les entrées de texte

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

Pour les entrées de zone de texte

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

Pour les cases à cocher

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

Pour les boutons 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");

Ça marche bien. Voir ce violon: http://jsfiddle.net/kveAL/

Il est possible que vous ayez besoin de déclarer votre jQuery dans un $(document).ready()gestionnaire?

De plus, pourriez-vous avoir deux éléments qui ont le même ID?

Ce serait une autre option:

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

J'ai eu le même problème.

Solution: ajoutez un rafraîchissement.

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

Je sais qu'il y a plusieurs itérations de réponses, mais maintenant cela ne nécessite pas jquery ou toute autre bibliothèque externe et peut être accompli assez facilement simplement avec ce qui suit.

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>

Certains cas peuvent être

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

Mon problème

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

J'ai eu le même problème . La seule différence avec votre code est que je chargeais la boîte de sélection via un appel ajax et dès que l'appel ajax était exécuté, j'avais défini la valeur par défaut de la boîte de sélection

La solution

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

J'ai eu un problème où la valeur n'était pas définie en raison d'une erreur de syntaxe avant l'appel.

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

Vérifiez les erreurs de syntaxe avant l'appel.

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

Ajout à @icksde et @Korah (merci aux deux!)

Lors de la construction des options avec AJAX, le document.ready peut être déclenché avant la construction de la liste, donc

Ça ne marche pas

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

Cela ne

Un délai d'attente fonctionne, mais comme @icksde le dit, il est fragile (j'avais en fait besoin de 20 ms au lieu de 10 ms). Il vaut mieux l'adapter à l'intérieur de la fonction AJAX comme ceci:

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