Sélectionner une option dans un select avec jQuery
jQuery permet de modifier la valeur sélectionnée dans une liste déroulante <select>. On peut sélectionner la valeur selon différents critères comme la valeur de l'option, ou sa position dans la liste.
Voici le code HTML d'exemple qu'on va utiliser :
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <select id="moteur" name="moteur"> <option value="">--</option> <option value="electrique">Électrique</option> <option value="essence">Essence</option> <option value="diesel">Diesel</option> <option value="vapeur">Vapeur</option> </select> <button id="select-essence">Select: essence</button> <button id="select-3">Select: #3</button> </body> </html>
Sélectionner une option par sa valeur
$('#select-essence').click(function(e){
$('#moteur option[value="essence"]').prop('selected', true);
});J'ai utilisé la fonction .prop pour sélectionner l'option, c'est la méthode recommandée par la documentation depuis la version jQuery 1.6. Si vous utilisez une version plus ancienne, utilisez la fonction attr : $(...).attr('selected', 'selected');.
Cette page peut vous intéresser : fond dégradé sur excel à lire tout de suite !
Sélectionner une option en fonction de sa position
L'autre méthode est de choisir par exemple la première option, la dernière, ou la nième, grâce à eq() qui pose une condition sur l'index de l'élément :
$('#select-3').click(function(e){
$('#moteur option:eq(3)').prop('selected', true);
});
Encore faim ? allez lire ça : convertir une vidéo en gif animé !
J'ai utilisé sous cette forme :
$('#id_du_select>#id_de_loption').prop('selected', true);
mais les propriété value= et eq(3) fonctionne également.
Merci pour la solution.
...
ai passé dix minutes à jouer avec le pti satellite à gauche. J'aime.
Mance, grâce à toi j'ai également perdu 10 min de ma vie, mais j'adore !
you have two other solutions:
1/ (use 'attr' instead of prop)
$('#select-essence').click(function(e){ $('#moteur option[value="essence"]').attr('selected', 'selected'); });2/ use val (easier)$('#select-essence').click(function(e){ $('#moteur').val('essence'); });Marche correctement.
Akram G, the first code works correctly, take a look at your version of jquery