Dapatkan teks yang dipilih dari daftar drop-down (kotak pilih) menggunakan jQuery

2302

Bagaimana saya bisa mendapatkan teks yang dipilih (bukan nilai yang dipilih) dari daftar drop-down di jQuery?

haddar
sumber
12
Hanya dua sen saya: Drop-down "ASP" tidak istimewa; itu HTML lama yang bagus. :-)
ankush981
Orang dapat merujuk artikel ini: javascriptstutorial.com/blog/…
Dilip Kumar Yadav
untuk cara javascript vanilla, lihat stackoverflow.com/a/5947/32453
rogerdpack
Hanya $ (ini) .prop ('terpilih', true); diganti .att ke .prop itu berfungsi untuk semua browser
Shahid Hussain Abbasi

Jawaban:

3773
$("#yourdropdownid option:selected").text();
rahul
sumber
207
Saya pikir ini seharusnya $("#yourdropdownid").children("option").filter(":selected").text()karena is () mengembalikan boolean apakah objek cocok dengan pemilih atau tidak.
MHollis
42
Saya kedua komentar tentang adalah () mengembalikan boolen; sebagai alternatif, gunakan perubahan kecil berikut: $ ('# yourdropdownid'). children ("option: selected"). text ();
scubbo
25
@ DT3 diuji is("selected").text()mengembalikan aTypeError: Object false has no method 'text'
ianace
96
$('select').children(':selected')adalah cara tercepat: jsperf.com/get-selected-option-text
Simon
3
$ ("# IdSelect"). Children ("option: selected"). Text ()
JD - DC TECH
266

Coba ini:

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

Untuk dropdown ASP.NET Anda dapat menggunakan pemilih berikut:

$("[id*='MyDropDownId'] :selected")
kgiannakakis
sumber
Versi ASP.NET di sini adalah satu-satunya Jquery yang berfungsi dengan asp.net bagi saya, oleh karena itu saya menyetujui itu. Yang ini: ( '$ ("# pilihan dropdownid Anda: terpilih"). Teks ();' tidak berfungsi di halaman asp.net menggunakan halaman master.
netfed
5
itu tidak berfungsi karena halaman master asp.net melempar karakter acak di depan pemilih. Secara teknis mencari sesuatu seperti("#ct0001yourdropdownid)
CSharper
1
@CSharper - Saya pikir mengatakan ASP.NET melempar karakter acak agak menyesatkan. Mereka tidak acak sama sekali, mereka struktural dan mengikuti aturan ketat (berdasarkan pada hal-hal seperti apakah Anda meletakkan IDkontrol Anda, dan jika tidak maka berdasarkan pada indeks di mana mereka muncul di tingkat pohon saat ini, dll. )
freefaller
Hai, bagaimana Anda melakukan ini di dalam baris / sel Tabel, bagaimana Anda tahu yang mana dari Dropdown dari tabel, terutama di ASP MVC 5
transformator
215

Jawaban yang diposting di sini, misalnya,

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

tidak bekerja untuk saya, tetapi ini berhasil:

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

Ini mungkin versi jQuery yang lebih lama.

JYX
sumber
7
Jangan benci jawaban ini. Menggunakan kata kunci "temukan" bermanfaat bagi saya. Saya datang dari konteks yang sama sekali berbeda.
ROFLwTIME
5
Anda tidak memerlukan bagian opsi sama sekali seperti yang tersirat dengan dipilih .. cukup menggunakan $ ('# yourdropdownid: terpilih'). text (); akan bekerja dengan baik
DSS
jquery-1.10.2.min, ini bekerja untuk saya, bukan yang lain.
kubilay
Jawaban populer berfungsi, tetapi saya membutuhkannya pada referensi yang sudah diperoleh untuk dipilih, jadi ini adalah jawaban terbaik untuk saya
Graham
102

Jika Anda sudah memiliki dropdownlist yang tersedia dalam suatu variabel, inilah yang berfungsi untuk saya:

$("option:selected", myVar).text()

Jawaban lain pada pertanyaan ini membantu saya, tetapi akhirnya forum jQuery utas $ (opsi + "ini: terpilih"). Attr ("rel") opsi yang dipilih tidak bekerja di IE paling membantu.

Pembaruan: memperbaiki tautan di atas

Kirk Liemohn
sumber
67

Ini bekerja untuk saya

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

Jika elemen dibuat secara dinamis

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

$("#DropDownID").val() akan memberikan nilai indeks yang dipilih.

Neeraj
sumber
37
Bukan jawaban yang tepat untuk pertanyaan itu, tetapi bermanfaat bagi saya. Pertanyaannya ingin teks yang dipilih.
Peter
54

Ini bekerja untuk saya:

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

Versi jQuery : 1.9.1

Binita Bharati
sumber
3
Ini bekerja untuk saya, karena pada changeacara tersebut saya sekarang dapat menggunakan $(this).find('option:selected').text()untuk mendapatkan teks.
Timo002
$(this).children(':selected').text()juga akan bekerja. @ Timo002
Tn. Mak
42

Untuk teks dari item yang dipilih, gunakan:

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

Untuk nilai item yang dipilih, gunakan:

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

Berbagai cara

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

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

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

4. $("#myselect").find(":selected").text();
MaxEcho
sumber
31
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
124
sumber
inilah yang, saya harapkan $(this) setelah panggilan ajax saya
Shantaram Tupe
Anda juga dapat melakukan $ ("opsi: terpilih", ini) .text () tanpa membungkus ini dalam objek JQuery.
Doug F
28

Gunakan ini

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

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

Kemudian Anda mendapatkan nilai dan teks yang Anda pilih di dalam selectedValuedan selectedText.

Mohammed Shaheen MK
sumber
1
Terpilih karena ini adalah satu-satunya jawaban yang tidak menggunakan jQuery.
Justin Lessard
Saya dengan cinta dengan vanilla js. Terima kasih banyak untuk ini.
Enrique Bermúdez
27
var someName = "Test";

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

Itu akan membantu Anda mendapatkan arah yang benar. Kode di atas sepenuhnya diuji jika Anda memerlukan bantuan lebih lanjut, beri tahu saya.

Zarni
sumber
19

Bagi mereka yang menggunakan daftar SharePoint dan tidak ingin menggunakan id lama, ini akan berfungsi:

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

Alih-alih #selectIDAnda dapat menggunakan pemilih jQuery apa pun, seperti .selectClassmenggunakan kelas.

Seperti disebutkan dalam dokumentasi di sini .

Selektor yang dipilih: berfungsi untuk elemen <option>. Ini tidak berfungsi untuk kotak centang atau input radio; gunakan :checkeduntuk mereka.

.text () Sesuai dokumentasi di sini .

Dapatkan konten teks gabungan dari setiap elemen dalam set elemen yang cocok, termasuk turunannya.

Jadi, Anda dapat mengambil teks dari elemen HTML apa pun menggunakan .text()metode ini.

Lihat dokumentasi untuk penjelasan yang lebih dalam.

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

Ini berfungsi dengan baik

Thangamani Palanisamy
sumber
13

Untuk mendapatkan nilai yang dipilih, gunakan

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

dan untuk mendapatkan teks item yang dipilih, gunakan baris ini:

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

Pilih Teks dan nilai yang dipilih pada dropdown / pilih ubah acara di jQuery

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

Cukup coba kode berikut.

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

mengembalikan teks dari opsi yang dipilih.

Muddasir23
sumber
9

Menggunakan:

('#yourdropdownid').find(':selected').text();
Kishore
sumber
9
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
Kalaivani M
sumber
Saya mencoba masuk div var div = e.options[e.selectedIndex].text;, dan itu hanya menampilkan item opsi pertama. Bagaimana cara agar setiap item ditampilkan?
Chris22
@ Chris22 lihat tautan ini stackoverflow.com/questions/3923858/…
Kalaivani M
8

berikut ini bekerja untuk saya:

$.trim($('#dropdownId option:selected').html())
Mohammad Dayyan
sumber
1
Catatan: Jangan gunakan ini untuk multi pilih. Ini hanya mengambil nilai yang dipilih pertama.
maks
7

Ini bekerja untuk saya:

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

Saya menggunakan jQuery 1.10.2

Rhaymand Tatlonghari
sumber
7

Dalam kasus saudara kandung

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

Klik untuk melihat Layar OutPut

Bhanu Pratap
sumber
Hai, bagaimana Anda melakukan ini di dalam baris / sel tabel , bagaimana Anda tahu yang mana dari Dropdown dari tabel? Saya mencoba membuat panggilan ajax untuk mengambil dan mengisi nilai-nilai, saya bisa melakukan ini di luar dalam halaman, tetapi tidak di dalam Table Row ... dapatkah Anda menambahkan bantuan tolong
transformer
4

Jika Anda ingin hasilnya sebagai daftar, maka gunakan:

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


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

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

$("#dropdown").children(":selected").text();
pemalu
sumber
jelaskan mengapa itu bisa berhasil
jwenting
2

Kode ini bekerja untuk saya.

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