jQuery pour récupérer et définir la valeur de l'option sélectionnée de l'élément de sélection html

126

J'essaie de récupérer et de définir la valeur sélectionnée d'un élément de sélection (liste déroulante) avec jQuery.

pour récupérer j'ai essayé $("#myId").find(':selected').val(), ainsi que $("#myId").val()mais les deux renvoient undefined.

Tout aperçu de ce problème serait très apprécié.

jquery ErnieStings
la source
si vous utilisez asp .net, leur identifiant peut ne pas être le même une fois rendu!
Rigobert Song

Réponses:

154

La façon dont vous l'avez est correcte pour le moment. Soit l'identifiant du select n'est pas ce que vous dites, soit vous rencontrez des problèmes dans le dom.

Vérifiez l'identifiant de l'élément et vérifiez également que votre balisage est validé ici au W3c.

Sans un dom valide, jQuery ne peut pas fonctionner correctement avec les sélecteurs.

Si les identifiants sont corrects et que votre dom valide, les conditions suivantes s'appliquent:

Pour lire, sélectionnez la valeur de l'option

$('#selectId').val();

Pour définir la valeur de l'option de sélection

$('#selectId').val('newValue');

Pour lire le texte sélectionné

$('#selectId>option:selected').text();
carré rouge
la source
@ Html.DropDownList ("CoinTypes", (SelectList) ViewBag.RequiredLevel, new {@class = "form-control", @ style = "height: 21px; margin-top: 5px;"}) mais $ ('# CoinTypes ') .val (@ ViewBag.CoinType); ne sélectionne pas
Nithin Paul
@NithinPaul pas vraiment un commentaire, posez une question qui montre du html afin que quelqu'un puisse réellement essayer de comprendre ce qui ne va pas. Je ne sais pas comment vous pouvez vous attendre à ce que quelqu'un le travaille à partir de certains formulaires Web / code mvc!
redsquare
248

pour obtenir / définir la propriété selectedIndex réelle de l'élément select, utilisez: 

$("#select-id").prop("selectedIndex");

$("#select-id").prop("selectedIndex",1);
pmko
la source
19
Il est important de noter que la fonctionnalité prop () a été implémentée dans la version 1.6, donc les versions précédentes n'ont pas cette fonctionnalité.
RobB
18
J'aime cette réponse car elle répond en fait à la question de l'accès à l'index, pas seulement à la valeur.
Pablo Diaz
4
oui. Je pensais que c'était la question initiale.
Jack Holt
Vous pourriez probablement aussi utiliser attr avec la même syntaxe et être d'accord.
Yitzhak
7
@ M.YitzhakSamuel .attr()et .prop()ne le sont pas non plus. Cela fonctionnera dans certains cas où un attribut est également une propriété, par exemple .attr('id')est égal à .prop('id'). Dans ce cas, .prop('selectedIndex')est égal à .get(0).selectedIndex.
WynandB
7

$('#myId').val() devrait le faire, faute de quoi j'essaierais:

$('#myId option:selected').val()
karim79
la source
4

Lors de la configuration avec JQM, n'oubliez pas de mettre à jour UI:

$('#selectId').val('newValue').selectmenu('refresh', true);
Jasper Giscombe
la source
Merci pour ce pépite - je me demandais pourquoi la nouvelle valeur n'apparaît pas à l'écran après avoir changé le selectedIndex avec $ ("# slot-choice"). Prop ("selectedIndex", n).
Samik R
3

$("#myId").val()devrait fonctionner si myidl'ID d'élément select!

Cela définirait l'élément sélectionné: $("#myId").val('VALUE');

Chanson de Rigobert
la source
1

Supposons que vous ayez créé une liste déroulante en utilisant la balise SELECT comme suit,

<select id="Country">

Maintenant, si vous voulez voir quelle est la valeur sélectionnée dans la liste déroulante à l'aide de JQuery, mettez simplement la ligne suivante pour récupérer cette valeur.

var result= $("#Country option:selected").text();

cela fonctionnera très bien.

JaySing
la source
0

Je sais que c'est vieux, mais je viens de passer un bon moment avec Razor, je ne pouvais pas le faire fonctionner, peu importe mes efforts. Continué à revenir comme "indéfini", peu importe si j'ai utilisé "texte" ou "html" pour l'attribut. Enfin, j'ai ajouté l'attribut "data-value" à l'option et je l'ai lu très bien.

 <option value="1" data-value="MyText">MyText</option>

 var DisplayText = $(this).find("option:selected").attr("data-value");
Darkloki
la source
0

$ ("Option #myId: sélectionnée") .text (); vous donnera le texte que vous avez sélectionné dans l'élément déroulant. de toute façon, vous pouvez le changer en .val (); pour en avoir la valeur. vérifiez le codage ci-dessous

<select id="myId">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>`
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>
Wikum W
la source
-1

Essaye ça

$('#your_select_element_id').val('your_value').attr().add('selected');
Syed Nazir Hussain
la source