Comment sélectionner le premier élément dans la liste déroulante en utilisant jquery?

106

Je veux savoir comment sélectionner la première option dans toutes les balises de sélection sur ma page à l'aide de jquery.

essayé ceci:

$('select option:nth(0)').attr("selected", "selected");

Mais n'a pas fonctionné

javascript jquery html Amr Elgarhy
la source

Réponses:

193

Essayez ceci ...

$('select option:first-child').attr("selected", "selected");

Une autre option serait la suivante, mais cela ne fonctionnera que pour une liste déroulante à la fois comme codé ci-dessous:

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

Jetez un œil à cet article sur la façon de définir en fonction de la valeur, c'est intéressant mais ne vous aidera pas pour ce problème spécifique:

Changer la valeur sélectionnée d'une liste déroulante avec jQuery

RSolberg
la source
il suffit de changer mon ID pour sélectionner comme je veux tous les tags sélectionnés
Amr Elgarhy
26
maintenant dans jQuery, vous pouvez accéder aux propriétés via la .prop()méthode. Vous pouvez donc utiliser $("select").prop("selectedIndex",0);un moyen rapide de sélectionner la première option dans toutes les listes déroulantes.
CBarr
3
Savez-vous si cela déclenchera un événement 'change' dans tous les navigateurs simplement en définissant l'attribut? Cela semble être dans Chrome, mais je ne l'ai pas testé de manière approfondie. Je pensais en ajouter un autre $('select').trigger('change');au cas où. Merci!
Brian Armstrong
3
var myDDL = $('myID')devrait avoir un hachage dans le sélecteur pour devenirvar myDDL = $('#myID')
user1069816
1
Cette méthode fonctionne bien pour moi:$('select option').first().prop('selected',true);
Lorenzo Magon
13

Votre sélecteur est faux, vous recherchiez probablement

$('select option:nth-child(1)')

Cela fonctionnera également:

$('select option:first-child')
Aistina
la source
3
L'index du sélecteur CSS nth-child commence à 1, pas à 0
Sergey
10

Une solution alternative pour RSolgberg, qui déclenche l' 'onchange'événement s'il est présent:

$("#target").val($("#target option:first").val());

Comment sélectionner la première option de <sélectionner> avec jQuery?

Muhammad Omar ElShourbagy
la source
1
Cela fonctionne mieux que la réponse acceptée si vous devez modifier plusieurs fois l'option sélectionnée. Par exemple, si vous filtrez vos options et en affichez une partie.
Guillaume Renoult le
4

Ce que vous voulez, c'est probablement:

$("select option:first-child")

Qu'est-ce que ce code

attr("selected", "selected");

fait est de définir l'attribut "sélectionné" sur "sélectionné"

Si vous voulez les options sélectionnées, qu'il s'agisse ou non du premier enfant, le sélecteur est:

$("select").children("[selected]")
RichN
la source
1
Remplacez attrpar propsi vous utilisez jQuery 1.6+
Jesan Fafon
2

Je réponds car les réponses précédentes ont cessé de fonctionner avec la dernière version de jQuery. Je ne sais pas quand cela a cessé de fonctionner, mais la documentation indique que .prop () est la méthode préférée pour obtenir / définir les propriétés depuis jQuery 1.6.

Voici comment je l'ai fait fonctionner (avec jQuery 3.2.1):

$('select option:nth-child(1)').prop("selected", true);

J'utilise knockoutjs et les liaisons de modification ne se sont pas déclenchées avec le code ci-dessus, j'ai donc ajouté .change () à la fin.

Voici ce dont j'avais besoin pour ma solution:

$('select option:nth-child(1)').prop("selected", true).change();

Voir les notes .prop () dans la documentation ici: http://api.jquery.com/prop/

Brandon
la source
2

Voici une javascriptsolution simple qui fonctionne dans la plupart des cas:

document.getElementById("selectId").selectedIndex = "0";
Jagruti
la source
1

si vous souhaitez vérifier le texte de l'option sélectionnée, qu'il s'agisse du premier enfant.

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}
sarah
la source
M'a sauvé une deuxième recherche. C'est à peu près ce que je recherchais, même si j'étais plus intéressé par la modification de la valeur que par la vérification. $('#myID option:selected').text('NEW STRING');
Ricky Payne
1 
    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);
ShivarajRH
la source