Bagaimana cara mendapatkan label opsi pilih dengan jQuery?

114
<select>
<option value="test">label </option>
</select>

Nilainya dapat diambil dengan $select.val().

Bagaimana dengan label?

Apakah ada solusi yang akan berhasil di IE6?

pengguna198729
sumber
Maksud Anda bagaimana mendapatkan nilai yang dipilih, nilai yang dipilih? yang ada di label kasus Anda?
semut
Pertanyaan ini harus diubah kata-katanya menjadi "Bagaimana cara mendapatkan teks opsi pilih dengan jQuery?" dan semua referensi ke label harus diganti dengan teks untuk menghindari kebingungan dengan atribut label.
Joel Davis

Jawaban:

22

Hai pertama berikan id untuk memilih sebagai

<select id=theid>
<option value="test">label </option>
</select>

maka Anda dapat memanggil label yang dipilih seperti itu:

jQuery('#theid option:selected').text()
open-ecommerce.org
sumber
13

Sebagai referensi, ada juga labelatribut sekunder pada tag opsi:

//returns "GET THIS" when option is selected
$('#selecter :selected').attr('label'); 

Html

<select id="selecter">
<option value="test" label="GET THIS">
Option (also called label)</option>
</select>
kingPuppy
sumber
6

Untuk mendapatkan label opsi tertentu dalam menu dropdown, Anda dapat melakukannya -

$('.class_of_dropdown > option[value='value_to_be_searched']').html();

atau

$('#id_of_dropdown > option[value='value_to_be_Searched']').html();
Snigdha Batra
sumber
3

Saya menemukan ini bermanfaat

$('select[name=users] option:selected').text()

Saat mengakses pemilih menggunakan thiskata kunci.

$(this).find('option:selected').text()
bmatovu.dll
sumber
2

Coba ini:

$('select option:selected').prop('label');

Ini akan menarik teks yang ditampilkan untuk kedua gaya <option>elemen:

  • <option label="foo"><option> -> "foo"
  • <option>bar<option> -> "bar"

Jika memiliki labelatribut dan teks di dalam elemen, itu akan menggunakanlabel atribut, yang merupakan perilaku yang sama seperti browser.

Untuk anak cucu, ini telah diuji di bawah jQuery 3.1.1

amfetamachine
sumber
0
<SELECT id="sel" onmouseover="alert(this.options[1].text);"
<option value=1>my love</option>
<option value=2>for u</option>
</SELECT>
meo
sumber
0

Di peramban modern, Anda tidak memerlukan JQuery untuk ini. Sebagai gantinya gunakan

document.querySelectorAll('option:checked')

Atau tentukan elemen DOM apa pun, bukan document

John Henckel
sumber
-2

Kamu sedang mencari $select.html()

http://api.jquery.com/html/

Guillaume Flandre
sumber
1
Itu hanya mengembalikan html untuk semua elemen opsi. Teks label ada / di / ada di suatu tempat, tetapi ini bukan cara paling efisien untuk mendapatkannya.
MSpreij