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


352

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?


10
En fait, c'est ainsi que cela devrait fonctionner, êtes-vous sûr de définir la valeur dans document.ready ()? Peut-être que le code est exécuté lorsque la boîte de sélection n'est pas encore prête.
Morph

Réponses:


496

Cela devrait certainement fonctionner. Voici une démo . Assurez-vous d'avoir placé votre code dans $(document).ready:

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

4
ok, lorsque je baisse la liste, elle est mise en surbrillance mais ne s'affiche pas comme premier élément de la liste
Upvote

2
ahh je l'ai déclaré pas dans la fonction de document prêt ... merci!
Upvote du

7
Pas aussi bon que de définir l'attribut "sélectionné" sur "sélectionné".
Adal

6
@Adal Pourquoi n'est-ce pas aussi efficace que de définir l'attribut "sélectionné" sur "sélectionné"?
Shawn

26
Juste au cas où quelqu'un d'autre se demanderait, le 'Gateway 2'passé à la fonction valcorrespond à la valeur de l' valueattribut de l'option de sélection, pas à son texte. Voir ce JSFiddle , qui est une version très légèrement éditée de la démo de Darin, pour un exemple de ce que je veux dire.
Kenny Evitt

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

37

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


2
Très similaire à celui $('#your-select-box-id :nth-child(2)').prop('selected', true)qui fonctionne, avec mise à jour visuelle de la drop-box.
Big Rich

Un seul qui a fonctionné pour moi. Suspect parce que j'utilise une bibliothèque de sélection personnalisée.
Louis M.

15

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

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

1
Cela aurait été bien si vous aviez inclus quelques informations à ce sujet. Ceci est un excellent exemple de la façon dont vous DEVRIEZ faire cela, SI vous avez un code qui surveille les modifications de la sélection.
sean.boyer

6

Ç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?


6

Ce serait une autre option:

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

6

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

Solution: ajoutez un rafraîchissement.

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

3
c'est seulement pour jqueryui selectmenu, pas standard html
stuartdotnet

3

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>


excellente solution. mais il semble qu'il ne supprime pas l'attribut sélectionné des options précédemment sélectionnées
Systems Rebooter

3

Certains cas peuvent être

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

1

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

1
vous avez correctement analysé le problème, mais la solution est mauvaise et fragile. vous devez utiliser une fonction de rappel attachée à votre appel ajax
icksde

-1

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.


4
Aussi utile que cela puisse être rappelé pour vérifier les erreurs de syntaxe, ce n'est pas une réponse.
Shotgun Ninja


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

1
Cela bouclera même au-delà de la valeur sélectionnée, ce qui est inefficace
Daniel Nuriyev

De .attr()plus, c'est la mauvaise façon de le faire depuis bien avant que cette réponse ne soit publiée.
Auspex

-2

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");
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.