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?


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

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>

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

3

Saya menemukan ini bermanfaat

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

Saat mengakses pemilih menggunakan thiskata kunci.

$(this).find('option:selected').text()


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


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


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


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.