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?


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


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();

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")

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.


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());
});


55

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


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


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();

33

Verschiedene Wege

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

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

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

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

31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

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.


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.


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();

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.



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();


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
})

10

Versuchen Sie einfach den folgenden Code.

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

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


9

Verwenden:

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


8

Folgendes hat bei mir funktioniert:

$.trim($('#dropdownId option:selected').html())

1
Hinweis: Verwenden Sie diese Option nicht für Mehrfachauswahl. Es wird nur der erste ausgewählte Wert erfasst.
Max


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

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


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


4

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

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

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


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

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

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

Erklären Sie, warum das funktionieren würde
am

2

Dieser Code hat bei mir funktioniert.

$("#yourdropdownid").children("option").filter(":selected").text();
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.