Obtenir le texte sélectionné dans une liste déroulante (case de sélection) à l'aide de jQuery

2302

Comment puis-je obtenir le texte sélectionné (pas la valeur sélectionnée) à partir d'une liste déroulante dans jQuery?

haddar
la source
12
Juste mes deux cents: une liste déroulante "ASP" n'est pas spéciale; c'est juste du bon vieux HTML. :-)
ankush981
On peut se référer à cet article: javascriptstutorial.com/blog/…
Dilip Kumar Yadav
pour la manière javascript vanille, voir stackoverflow.com/a/5947/32453
rogerdpack
Juste $ (this) .prop ('selected', true); remplacé .att par .prop cela a fonctionné pour tous les navigateurs
Shahid Hussain Abbasi

Réponses:

3773
$("#yourdropdownid option:selected").text();
rahul
la source
207
Je pense que cela devrait être $("#yourdropdownid").children("option").filter(":selected").text()puisque is () renvoie un booléen indiquant si l'objet correspond au sélecteur ou non.
MHollis
42
J'appuie le commentaire sur () le retour d'un volé; vous pouvez également utiliser la petite modification suivante: $ ('# yourdropdownid'). children ("option: selected"). text ();
scubbo
25
@ DT3 testé is("selected").text()renvoie unTypeError: Object false has no method 'text'
ianace
96
$('select').children(':selected')est le moyen le plus rapide: jsperf.com/get-selected-option-text
Simon
3
$ ("# IdSelect"). Children ("option: selected"). Text ()
JD - DC TECH
266

Essaye ça:

$("#myselect :selected").text();

Pour une liste déroulante ASP.NET, vous pouvez utiliser le sélecteur suivant:

$("[id*='MyDropDownId'] :selected")
kgiannakakis
la source
La version ASP.NET ici est la seule Jquery qui fonctionne avec asp.net pour moi, j'approuve donc celle-ci. Celui-ci: ( '$ ("# yourdropdownid option: selected"). Text ();' ne fonctionnait pas dans une page asp.net utilisant une page maître.
netfed
5
cela ne fonctionne pas car les pages maîtres asp.net jettent des caractères aléatoires devant le sélecteur. C'est techniquement à la recherche de quelque chose comme("#ct0001yourdropdownid)
CSharper
1
@CSharper - Je pense que dire ASP.NET jette des caractères aléatoires est assez trompeur. Ils ne sont pas du tout aléatoires, ils sont structurels et suivent des règles strictes (basées sur des choses comme si vous mettez un IDsur votre contrôle, et sinon sur la base de l'index de l'endroit où elles se produisent dans le niveau actuel de l'arborescence, etc. )
Freefaller
Salut, comment faites-vous cela dans une ligne / cellule de tableau, comment savez-vous lequel du menu déroulant du tableau, en particulier dans ASP MVC 5
transformateur
215

Les réponses affichées ici, par exemple,

$('#yourdropdownid option:selected').text();

n'a pas fonctionné pour moi, mais cela a:

$('#yourdropdownid').find('option:selected').text();

Il s'agit peut-être d'une ancienne version de jQuery.

JYX
la source
7
Ne déteste pas cette réponse. L'utilisation du mot clé "find" a fait l'affaire pour moi. Je venais d'un contexte complètement différent.
ROFLwTIME
5
vous n'avez pas du tout besoin de la partie option comme son implicite avec selected .. en utilisant simplement $ ('# yourdropdownid: selected'). text (); fonctionnera bien
Dss
jquery-1.10.2.min, celui-ci a fonctionné pour moi, pas pour les autres.
kubilay
La réponse populaire fonctionne, mais j'en avais besoin sur une référence déjà obtenue à la sélection, c'est donc la meilleure réponse pour moi
Graham
67

Ça marche pour moi

$("#dropdownid").change(function() {
    alert($(this).find("option:selected").text());
});

Si l'élément créé dynamiquement

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});
Prabhagaran
la source
64
$("option:selected", $("#TipoRecorde")).text()
Rafael
la source
55

$("#DropDownID").val() donnera la valeur d'index sélectionnée.

Neeraj
la source
37
Pas exactement la réponse à la question, mais elle m'a été utile. La question veut le texte sélectionné.
Peter
54

Cela fonctionne pour moi:

$('#yourdropdownid').find('option:selected').text();

Version jQuery : 1.9.1

Binita Bharati
la source
3
Cela a fonctionné pour moi, car sur l' changeévénement, je peux maintenant utiliser $(this).find('option:selected').text()pour obtenir du texte.
Timo002
$(this).children(':selected').text()fonctionnerait également. @ Timo002
M. Mak
42

Pour le texte de l'élément sélectionné, utilisez:

$('select[name="thegivenname"] option:selected').text();

Pour la valeur de l'élément sélectionné, utilisez:

$('select[name="thegivenname"] option:selected').val();
Kamrul
la source
33

Différentes manières

1. $("#myselect option:selected").text();

2. $("#myselect :selected").text();

3. $("#myselect").children(":selected").text();

4. $("#myselect").find(":selected").text();
MaxEcho
la source
31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
124
la source
c'est ce que j'attendais avec $(this) après mon appel ajax
Shantaram Tupe
Vous pouvez également faire $ ("option: selected", this) .text () sans envelopper cela dans un objet JQuery.
Doug F
28

Utilisez ceci

const select = document.getElementById("yourSelectId");

const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;   

Ensuite, vous obtenez la valeur et le texte sélectionnés dans selectedValueet selectedText.

Mohammed Shaheen MK
la source
1
Voté parce que c'est la seule réponse n'utilisant pas jQuery.
Justin Lessard
Je suis amoureux de vanilla js. Merci beaucoup pour cela.
Enrique Bermúdez
27
var someName = "Test";

$("#<%= ddltest.ClientID %>").each(function () {
    $('option', this).each(function () {
        if ($(this).text().toLowerCase() == someName) {
            $(this).attr('selected', 'selected')
        };
    });
});

Cela vous aidera à obtenir la bonne direction. Le code ci-dessus est entièrement testé si vous avez besoin d'aide supplémentaire, faites le moi savoir.

Zarni
la source
19

Pour ceux qui utilisent des listes SharePoint et ne veulent pas utiliser l'ID généré longtemps, cela fonctionnera:

var e = $('select[title="IntenalFieldName"] option:selected').text();
FAA
la source
17
 $("#selectID option:selected").text();

Au lieu de cela, #selectIDvous pouvez utiliser n'importe quel sélecteur jQuery, comme en .selectClassutilisant class.

Comme mentionné dans la documentation ici .

Le sélecteur: selected fonctionne pour les éléments <option>. Cela ne fonctionne pas pour les cases à cocher ou les entrées radio; utiliser :checkedpour eux.

.text () Selon la documentation ici .

Obtenez le contenu textuel combiné de chaque élément dans l'ensemble des éléments correspondants, y compris leurs descendants.

Vous pouvez donc prendre le texte de n'importe quel élément HTML en utilisant la .text()méthode.

Reportez-vous à la documentation pour une explication plus approfondie.

Nikhil Agrawal
la source
15
$("select[id=yourDropdownid] option:selected").text()

Cela fonctionne bien

Thangamani Palanisamy
la source
13

Pour obtenir la valeur sélectionnée, utilisez

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

et pour obtenir le texte de l'élément sélectionné, utilisez cette ligne:

$("#dropDownId option:selected").text();
Mojtaba
la source
12
$('#id').find('option:selected').text();
Nikul
la source
11

Sélectionnez Texte et valeur sélectionnée dans la liste déroulante / sélectionnez l'événement de changement dans jQuery

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})
Sandeep Shekhawat
la source
10

Essayez simplement le code suivant.

var text= $('#yourslectbox').find(":selected").text();

il renvoie le texte de l'option sélectionnée.

Muddasir23
la source
9

Utilisation:

('#yourdropdownid').find(':selected').text();
kishore
la source
9
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
Kalaivani M
la source
J'ai essayé de connecter le div var div = e.options[e.selectedIndex].text;, et il n'affiche que le premier élément d'option. Comment afficher chaque élément?
Chris22
@ Chris22 référez ce lien stackoverflow.com/questions/3923858/…
Kalaivani M
8

ce qui suit a fonctionné pour moi:

$.trim($('#dropdownId option:selected').html())
Mohammad Dayyan
la source
1
Remarque: Ne l'utilisez pas pour la sélection multiple. Il ne saisit que la première valeur sélectionnée.
max
7

Ce travail pour moi:

$("#city :selected").text();

J'utilise jQuery 1.10.2

Rhaymand Tatlonghari
la source
7

En cas de fratrie

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()
vigne
la source
7

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>

  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <select id="selectnumber">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
          <option value="4">four</option>
        </select>

      </div>
    </form>
  </body>
</html>

Cliquez pour voir l'écran OutPut

Bhanu Pratap
la source
Salut, comment faites-vous cela dans une ligne / cellule de tableau , comment savez-vous lequel du menu déroulant du tableau? J'essaie de faire un appel ajax pour récupérer et remplir des valeurs, je peux le faire à l'extérieur dans une page, mais pas à l'intérieur de la ligne du tableau ... pouvez-vous ajouter de l'aide s'il vous plaît
transformateur
4

Si vous voulez le résultat sous forme de liste, utilisez:

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})
max
la source
2
$("#dropdown").find(":selected").text();


$("#dropdown :selected").text();

$("#dropdown option:selected").text();

$("#dropdown").children(":selected").text();
shyamm
la source
expliquer pourquoi cela fonctionne
jwenting
2

Ce code a fonctionné pour moi.

$("#yourdropdownid").children("option").filter(":selected").text();
Naveenbos
la source