JQuery kullanarak açılan listeden (seçim kutusu) seçilen metni alma


2302

JQuery'deki açılır listeden seçilen metni (seçilen değeri değil) nasıl alabilirim ?


12
Sadece iki sentim: "ASP" açılır menüsü özel değil; sadece eski güzel HTML. :-)
ankush981

Bu makaleye başvurabilirsiniz: javascriptstutorial.com/blog/…
Dilip Kumar Yadav

vanilya javascript yolu için bkz. stackoverflow.com/a/5947/32453
rogerdpack

Sadece $ (this) .prop ('seçildi', doğru); yerini .att tüm tarayıcılar için çalışmış .prop için
Shahid Hussain Abbasi

Yanıtlar:


3773
$("#yourdropdownid option:selected").text();

207
Ben bu $("#yourdropdownid").children("option").filter(":selected").text()yana olması gerektiğini düşünüyorum () nesne seçici ile eşleşip eşleşmediğini bir boole döndürür.
MHollis

42
Ben ikinci () bir boolen döndürme hakkında yorum; alternatif olarak şu küçük değişikliği kullanın: $ ('# yourdropdownid'). children ("seçenek: seçili"). text ();
scubbo

25
@ DT3 test edilen test is("selected").text()sonuçları birTypeError: Object false has no method 'text'
ianace

96
$('select').children(':selected')en hızlı yoldur: jsperf.com/get-selected-option-text
Simon

3
$ ("# IdSelect"). Children ("seçenek: seçili"). Metin ()
JD - DC TECH

266

Bunu dene:

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

ASP.NET açılır menüsü için aşağıdaki seçiciyi kullanabilirsiniz:

$("[id*='MyDropDownId'] :selected")

ASP.NET sürümü benim için asp.net ile çalışan tek Jquery, bu yüzden buna rıza. Bu bir: ( '$ ("# yourdropdownid seçeneği: seçili"). Text ();' ana sayfa kullanan bir asp.net sayfasında çalışmadı.
netfed

5
asp.net kalıp sayfaları seçicinin önüne rastgele karakterler atar çünkü çalışmaz. Teknik olarak böyle bir şey arıyor("#ct0001yourdropdownid)
CSharper


1
@CSharper - Bence ASP.NET rastgele karakterler atıyor oldukça yanıltıcı. Hiç rastgele değiller, yapısaldırlar ve sıkı kurallara uyarlar ( IDkontrolünüze koyup koymamanız gibi şeylere dayanır ve eğer değilse, ağacın mevcut seviyesinde nerede bulundukları dizinine vb. )
freefaller

Merhaba bunu bir Tablo satırı / hücresi içinde nasıl yaparsınız, özellikle ASP MVC 5
Transformer

215

Burada gönderilen cevaplar, örneğin,

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

benim için işe yaramadı, ama bu işe yaradı:

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

Muhtemelen jQuery'nin daha eski bir sürümüdür.


7
Bu cevaptan nefret etme. "Bul" anahtar kelimesini kullanmak benim için hile yaptı. Tamamen farklı bir bağlamdan geliyordum.
ROFLwTIME

5
seçili ile ima edildiği gibi seçenek kısmına hiç ihtiyacınız yoktur .. sadece $ ('# yourdropdownid: seçilmiş') kullanarak text (); iyi çalışır
Dss

jquery-1.10.2.min, bu benim için çalıştı, diğerleri için değil.
kubilay

Popüler cevap işe yarıyor, ancak seçime zaten alınmış bir referansa ihtiyacım vardı, bu yüzden bu benim için en iyi cevap
Graham


67

Bu benim için çalışıyor

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

Öğe dinamik olarak oluşturulduysa

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


55

$("#DropDownID").val() seçilen indeks değerini verecektir.


37
Sorunun cevabı tam olarak değil, benim için yararlı oldu. Soru seçilen metni istiyor.
Peter

54

Bu benim için çalışıyor:

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

jQuery sürümü: 1.9.1


3
Bu benim için çalıştı, çünkü changeolayda şimdi $(this).find('option:selected').text()metin almak için kullanabilirim .
Timo002

$(this).children(':selected').text()de işe yarar. @ Timo002
Bay Mak

42

Seçilen öğenin metni için şunu kullanın:

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

Seçilen öğenin değeri için şunu kullanın:

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

33

Çeşitli yollar

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

İşte bu, $(this) ajax
çağrımdan

Ayrıca bir JQuery nesnesine sarmadan $ ("option: selected", this) .text () yapabilirsiniz.
Doug F

28

Bunu kullan

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

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

Sonra seçtiğiniz değeri ve metni selectedValueve içine alırsınız selectedText.


1
Bu, jQuery kullanmayan tek yanıt olduğu için seçildi.
Justin Lessard

Ben vanilya js sevgisiyim. Bunun için çok teşekkürler.
Enrique Bermúdez

27
var someName = "Test";

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

Bu doğru yönü bulmanıza yardımcı olacaktır. Daha fazla yardıma ihtiyacınız olursa yukarıdaki kod tamamen test edilir.


19

Kullanarak olanlar için SharePoint listeleri ve uzun oluşturulan kimliği kullanmak istemiyorsanız, işe yarayacak:

var e = $('select[title="IntenalFieldName"] option:selected').text();

17
 $("#selectID option:selected").text();

Bunun yerine, sınıfı kullanmak #selectIDgibi herhangi bir jQuery seçicisini kullanabilirsiniz .selectClass.

Buradaki belgelerde belirtildiği gibi .

: Seçilen seçici <seçenek> öğeleri için çalışır. Onay kutuları veya radyo girişleri için çalışmaz; :checkedonlar için kullanın .

.text () Buradaki belgelere göre .

Her öğenin birleştirilmiş metin içeriğini, torunları da dahil olmak üzere eşleşen öğeler kümesinde edinin.

Böylece .text()yöntemi kullanarak herhangi bir HTML öğesinden metin alabilirsiniz .

Daha ayrıntılı bir açıklama için belgelere bakın.



13

Seçilen değeri almak için

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

ve seçilen öğe metnini almak için şu satırı kullanın:

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


11

JQuery'de Metin'i ve açılır menüde seçilen değeri seçin

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

10

Aşağıdaki kodu deneyin.

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

seçilen seçeneğin metnini döndürür.


9

kullanın:

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


8

aşağıdakiler benim için çalıştı:

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

1
Not: Bunu çoklu seçim için kullanmayın. Yalnızca ilk seçilen değeri alır.
en fazla


7

Kardeş durumda

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

Çıkış Ekranını görmek için tıklayın


Merhaba, bunu bir Tablo satırı / hücresi içinde nasıl yaparsınız, tablodaki Açılır menüden hangisini nasıl bilirsiniz? Değerleri almak ve doldurmak için bir ajax çağrısı yapmaya çalışıyorum, bunu bir sayfada dışarıda yapabilirim, ancak Tablo Satırı içinde değil ... biraz yardım ekleyebilir misiniz lütfen
transformatör


4

Sonucu bir liste olarak istiyorsanız, şunu kullanın:

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

neden işe
yaradığını

2

Bu kod benim için çalıştı.

$("#yourdropdownid").children("option").filter(":selected").text();
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.