Rufen Sie mit jQuery ausgewählten Text aus einer Dropdown-Liste (Auswahlfeld) ab

2302

Wie kann ich den ausgewählten Text (nicht den ausgewählten Wert) aus einer Dropdown-Liste in jQuery abrufen?

Haddar
quelle
12
Nur meine zwei Cent: Ein "ASP" -Dropdown ist nichts Besonderes; Es ist nur gutes altes HTML. :-)
ankush981
Man kann diesen Artikel verweisen: javascriptstutorial.com/blog/…
Dilip Kumar Yadav
Informationen
rogerdpack
Nur $ (this) .prop ('ausgewählt', wahr); ersetzt .att zu .prop es funktionierte für alle Browser
Shahid Hussain Abbasi

Antworten:

3773
$("#yourdropdownid option:selected").text();
rahul
quelle
207
Ich denke, dies sollte sein, $("#yourdropdownid").children("option").filter(":selected").text()da is () einen Booleschen Wert zurückgibt, ob das Objekt mit dem Selektor übereinstimmt oder nicht.
MHollis
42
Ich stimme dem Kommentar zu is () zu, der einen Boolen zurückgibt. Verwenden Sie alternativ die folgende kleine Änderung: $ ('# yourdropdownid'). children ("option: selected"). text ();
Scubbo
25
@ DT3 getestet is("selected").text()gibt aTypeError: Object false has no method 'text'
ianace
96
$('select').children(':selected')ist der schnellste Weg: jsperf.com/get-selected-option-text
Simon
3
$ ("# IdSelect"). Kinder ("Option: ausgewählt"). Text ()
JD - DC TECH
266

Versuche dies:

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

Für ein ASP.NET-Dropdown können Sie den folgenden Selektor verwenden:

$("[id*='MyDropDownId'] :selected")
kgiannakakis
quelle
Die ASP.NET-Version hier ist die einzige JQuery, die für mich mit asp.net funktioniert. Daher stimme ich dieser zu. Diese: ( '$ ("# yourdropdownid option: selected"). Text ();' funktionierte auf einer asp.net-Seite mit einer Masterseite nicht.
netfed
5
es funktioniert nicht, weil asp.net-Masterseiten zufällige Zeichen vor den Selektor werfen. Es ist technisch auf der Suche nach etwas wie("#ct0001yourdropdownid)
CSharper
1
@CSharper - Ich denke, dass es ziemlich irreführend ist , zu sagen, dass ASP.NET zufällige Zeichen auslöst . Sie sind überhaupt nicht zufällig, sie sind strukturell und folgen strengen Regeln (basierend auf Dingen wie der Frage, ob Sie IDIhre Kontrolle übernehmen, und wenn nicht, basierend auf dem Index, wo sie in der aktuellen Ebene des Baums auftreten usw. )
Freifaller
Hallo, wie machst du das in einer Tabellenzeile / -zelle, woher weißt du, welche Dropdown-Liste aus der Tabelle stammt, insbesondere in ASP MVC 5
Transformator
215

Die hier geposteten Antworten zum Beispiel

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

hat bei mir nicht funktioniert, aber das hat funktioniert:

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

Es ist möglicherweise eine ältere Version von jQuery.

JYX
quelle
7
Hassen Sie diese Antwort nicht. Die Verwendung des Schlüsselworts "find" hat mir geholfen. Ich kam aus einem ganz anderen Kontext.
ROFLwTIME
5
Sie benötigen den Optionsteil überhaupt nicht, da er mit selected impliziert ist. Verwenden Sie einfach $ ('# yourdropdownid: selected'). text (); wird gut funktionieren
Dss
jquery-1.10.2.min, dieser hat für mich funktioniert, nicht für andere.
Kubilay
Die beliebte Antwort funktioniert, aber ich brauchte sie für einen bereits erhaltenen Verweis auf die Auswahl, daher ist dies die beste Antwort für mich
Graham
67

Das funktioniert bei mir

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

Wenn das Element dynamisch erstellt wurde

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

$("#DropDownID").val() gibt den ausgewählten Indexwert an.

Neeraj
quelle
37
Nicht genau die Antwort auf die Frage, aber nützlich für mich. Die Frage möchte den ausgewählten Text.
Peter
54

Das funktioniert bei mir:

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

jQuery- Version: 1.9.1

Binita Bharati
quelle
3
Das hat bei mir funktioniert, denn für den changeFall kann ich jetzt $(this).find('option:selected').text()Text abrufen.
Timo002
$(this).children(':selected').text()würde auch funktionieren. @ Timo002
Mr. Mak
42

Verwenden Sie für den Text des ausgewählten Elements:

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

Verwenden Sie für den Wert des ausgewählten Elements:

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

Verschiedene Wege

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

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

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

4. $("#myselect").find(":selected").text();
MaxEcho
quelle
31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
124
quelle
Dies ist, was ich $(this) nach meinem Ajax-Anruf erwartet hatte
Shantaram Tupe
Sie können auch $ ("option: selected", this) .text () ausführen, ohne dies in ein JQuery-Objekt zu verpacken.
Doug F
28

Benutze das

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

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

Dann erhalten Sie Ihren ausgewählten Wert und Text in selectedValueund selectedText.

Mohammed Shaheen MK
quelle
1
Upvoted, da dies die einzige Antwort ist, die jQuery nicht verwendet.
Justin Lessard
Ich bin verliebt in Vanille js. Vielen Dank dafür.
Enrique Bermúdez
27
var someName = "Test";

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

Das wird Ihnen helfen, die richtige Richtung zu finden. Der obige Code ist vollständig getestet, wenn Sie weitere Hilfe benötigen. Lassen Sie es mich wissen.

Zarni
quelle
19

Für diejenigen, die SharePoint- Listen verwenden und die lange generierte ID nicht verwenden möchten, funktioniert dies:

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

Stattdessen #selectIDkönnen Sie einen beliebigen jQuery-Selektor verwenden, z. B. .selectClassclass.

Wie in der Dokumentation hier erwähnt .

Der ausgewählte Selektor funktioniert für <Option> -Elemente. Es funktioniert nicht für Kontrollkästchen oder Funkeingänge. Verwendung :checkedfür sie.

.text () Gemäß der Dokumentation hier .

Rufen Sie den kombinierten Textinhalt jedes Elements in der Gruppe der übereinstimmenden Elemente einschließlich ihrer Nachkommen ab.

Mit der .text()Methode können Sie also Text aus jedem HTML-Element entnehmen .

Weitere Informationen finden Sie in der Dokumentation.

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

Das funktioniert gut

Thangamani Palanisamy
quelle
13

Verwenden Sie zum Abrufen des ausgewählten Werts

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

und um ausgewählten Elementtext zu erhalten, verwenden Sie diese Zeile:

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

Wählen Sie Text und ausgewählten Wert in der Dropdown-Liste aus / wählen Sie Änderungsereignis in jQuery

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

Versuchen Sie einfach den folgenden Code.

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

Es gibt den Text der ausgewählten Option zurück.

Muddasir23
quelle
9

Verwenden:

('#yourdropdownid').find(':selected').text();
Kishore
quelle
9
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
Kalaivani M.
quelle
Ich habe versucht, das div anzumelden var div = e.options[e.selectedIndex].text;, und es wird nur das erste Optionselement angezeigt. Wie wird jedes Element angezeigt?
Chris22
@ Chris22 verweisen Sie auf diesen Link stackoverflow.com/questions/3923858/…
Kalaivani M
8

Folgendes hat bei mir funktioniert:

$.trim($('#dropdownId option:selected').html())
Mohammad Dayyan
quelle
1
Hinweis: Verwenden Sie diese Option nicht für Mehrfachauswahl. Es wird nur der erste ausgewählte Wert erfasst.
Max
7

Diese Arbeit für mich:

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

Ich verwende jQuery 1.10.2

Rhaymand Tatlonghari
quelle
7

Im Geschwisterfall

<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()
Weinstock
quelle
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>

Klicken Sie hier, um den OutPut-Bildschirm anzuzeigen

Bhanu Pratap
quelle
Hallo , wie Sie dies tun in einer Tabelle Zeile / Zelle , wie Sie wissen, welche der Dropdown aus der Tabelle? Ich versuche, einen Ajax-Aufruf zu tätigen, um Werte abzurufen und zu füllen. Ich kann dies außerhalb einer Seite tun, aber nicht innerhalb der Tabellenzeile. Können Sie bitte etwas Hilfe hinzufügen
Transformator
7

Versuchen:

$var = jQuery("#dropdownid option:selected").val();
   alert ($var);

Oder verwenden Sie text(): Um den Text der Option abzurufen :

$var = jQuery("#dropdownid option:selected").text();
   alert ($var);

Mehr Info:

Vishal Thakur
quelle
4

Wenn Sie das Ergebnis als Liste haben möchten, verwenden Sie:

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


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

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

$("#dropdown").children(":selected").text();
Shyamm
quelle
Erklären Sie, warum das funktionieren würde
am
2

Dieser Code hat bei mir funktioniert.

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