Bagaimana cara mendapatkan $ (ini) opsi yang dipilih di jQuery?

92

Kode berikut berfungsi:

$("#select-id").change(function(){
  var cur_value = $('#select-id option:selected').text();
  . . .
});

Cara merefaktor baris kedua menjadi:

var cur_value = $(this).***option-selected***.text();

Apa yang Anda gunakan ***option-selected***?

javascript jquery B Tujuh
sumber

Jawaban:

121

Untuk nilai yang dipilih: $(this).val()

Jika Anda membutuhkan elemen opsi yang dipilih, $("option:selected", this)

jorgebg.dll
sumber
106 
 $(this).find('option:selected').text();
pengguna56reinstatemonica8
sumber
Ini bekerja dengan sempurna untuk saya - Saya mencoba $("option:selected", this)seperti yang disebutkan di atas tetapi itu bermasalah. Saya menggunakan klik tombol untuk menambahkan teks elemen opsi yang dipilih ke div lain, tetapi ketika saya mengklik tombol, itu benar-benar mengubah elemen yang dipilih ... aneh. Gunakan yang ini.
skwidbreth
53

Cara terbaik dan terpendek menurut saya untuk acara onchange di dropdown untuk mendapatkan opsi yang dipilih:

$('option:selected',this);

untuk mendapatkan atribut nilai:

$('option:selected',this).attr('value');

untuk mendapatkan bagian yang ditampilkan di antara tag:

$('option:selected',this).text();

Dalam sampel Anda:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});
angelmedia
sumber
Jangan gunakan .context, ini sudah tidak digunakan lagi sejak jQuery 1.10 - api.jquery.com/category/deprecated/deprecated-1.10
rafx
Ya, tapi yang Anda maksud adalah ini: api.jquery.com/context $ ("ul", document.body) .context.nodeName yang tidak saya gunakan
angelmedia
1
Saya suka jawabannya, tetapi mengapa yang terbaik?
Sébastien Gicquel
40 
var cur_value = $('option:selected',this).text();
Satyam Khatri
sumber
Meskipun ini secara teoritis dapat menjawab pertanyaan, akan lebih baik jika menyertakan bagian penting dari jawaban di sini, dan menyediakan tautan untuk referensi.
Enamul Hassan
13

Ini harus bekerja:

$(this).find('option:selected').text();
Dia Berkilau
sumber
Jawaban yang sama seperti di atas
Hugh Seagraves
1
Diposting dalam menit yang sama!
lharby
9

Anda dapat menggunakan finduntuk mencari opsi terpilih yang merupakan turunan dari node yang ditunjukkan oleh objek jQuery saat ini:

var cur_value = $(this).find('option:selected').text();

Karena ini kemungkinan besar merupakan anak langsung, saya sebenarnya menyarankan untuk menggunakan .childrensebagai gantinya:

var cur_value = $(this).children('option:selected').text();
Platinum Azure
sumber
7 
var cur_value = $(this).find('option:selected').text();

Karena optionkemungkinan anak langsung selectAnda juga dapat menggunakan:

var cur_value = $(this).children('option:selected').text();

http://api.jquery.com/find/

thomthom
sumber
Di mana Anda mendapatkan option-selectedtanpa kutipan ...?
Platinum Azure
Itu salah ketik ketika saya memposting. Memperbaiki jawabannya.
thomthom
find('option:selected')mengembalikan string kosong untuk saya. Versi jQuery apa yang dibutuhkan? Saya bekerja di 1.6.1. children('option:selected')berhasil.
B Tujuh
option:selectedtelah ada sejak v1.0 api.jquery.com/selected-selector
thomthom
0

Tamu terbaik:

var cur_value = $('#select-id').children('option:selected').text();

Saya lebih menyukai anak-anak dalam hal ini karena Anda tahu Anda hanya akan turun satu cabang di pohon DOM ...

Likwid_T
sumber
Mungkin yang Anda maksud sebenarnya adalah var cur_value = $ (this) .children ('option: selected'). Text ();
Joe Johnston
0

Hanya saja

$(this).val();

Saya pikir jQuery cukup pintar untuk mengetahui apa yang Anda butuhkan

Edmund Adjei
sumber