jQuery mendapatkan teks tag opsi tertentu

1234

Baiklah, katakan saya punya ini:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Seperti apa pemilih itu jika saya ingin mendapatkan "Opsi B" ketika saya memiliki nilai '2'?

Harap dicatat bahwa ini bukan menanyakan bagaimana mendapatkan nilai teks yang dipilih , tetapi hanya salah satu dari mereka, apakah dipilih atau tidak, tergantung pada atribut nilai. Saya mencoba:

$("#list[value='2']").text();

Tapi itu tidak berhasil.

Paolo Bergantino
sumber
Untuk periode waktu ini, gunakan:$("#list option").filter(function () { return $(this).html() == "stuff"; }).val();
benteng

Jawaban:

1122

Ia mencari elemen dengan id listyang memiliki properti valuesama dengan 2.
Yang Anda inginkan adalah optionanak dari list:

$("#list option[value='2']").text()
nickf
sumber
4
Terima kasih atas nickf ini. Inilah jawaban yang diperluas jika Anda ingin mendapatkan nilai secara dinamis: var selectValue = document.getElementById ('list'). Value; var selectOption = $ ("# list option [value =" + selectValue + "]"). text (); /// contoh bagus nickf.
Kevin Florida
283
@ Kevin, dalam hal ini, Anda mungkin ingin menggunakan jawaban di bawah ini. $('#list option:selected').text()
nickf
6
@nickf, dan lebih sederhana,$('#list').val()
Derek 朕 會 功夫
36
@ Serek, val () tidak akan memberikan teks opsi, itu akan memberikan nilainya, yang dalam beberapa kasus (banyak saya berani katakan) tidak sama.
itsmequinn
Anda harus selalu menggunakan .trim()after .text()karena beberapa browser terkadang menambahkan beberapa spasi sebelum dan sesudah teks yang tidak terlihat oleh pengguna tetapi bisa menyebabkan nilai yang salah$("#list option[value='2']").text().trim()
Hassan ALAMI
1262

Jika Anda ingin mendapatkan opsi dengan nilai 2, gunakan

$("#list option[value='2']").text();

Jika Anda ingin mendapatkan opsi mana saja yang saat ini dipilih, gunakan

$("#list option:selected").text();
ArtOfWarfare
sumber
11
Untuk mendapatkan nilai alih-alih teks, Anda harus menulis: - $ ("pilih # list"). Val (); Saya tahu bahwa ini bukan jawaban sebenarnya dari pertanyaan yang diajukan, tetapi masih berpikir untuk menyebutkan poin ini untuk pemula yang datang melalui Google.
Knowledge Craving
Saya menggunakan $ ("opsi daftar pilihan: terpilih"). Teks () dan $ ("opsi daftar pilihan: terpilih"). Attr ('value')
fullstacklife
Untuk mendapatkan teks yang dipilih (meskipun pertanyaan tidak menanyakannya secara spesifik), metode ini lebih unggul karena tidak harus tahu apa nilai yang dipilih.
theJerm
132

Ini berfungsi dengan baik untuk saya, saya sedang mencari cara untuk mengirim dua nilai berbeda dengan opsi yang dihasilkan oleh MySQL, dan berikut ini adalah generik dan dinamis:

$(this).find("option:selected").text();

Seperti yang disebutkan dalam salah satu komentar. Dengan ini saya dapat membuat fungsi dinamis yang berfungsi dengan semua kotak pilihan saya yang saya ingin dapatkan baik nilai, nilai opsi dan teks.

Beberapa hari yang lalu saya perhatikan bahwa ketika memperbarui jQuery dari 1,6 ke 1,9 dari situs saya menggunakan kode ini, ini berhenti berfungsi ... mungkin ada konflik dengan sepotong kode lain ... lagi pula, solusinya adalah menghapus opsi dari temukan () panggilan:

$(this).find(":selected").text();

Itu solusi saya ... gunakan hanya jika Anda memiliki masalah setelah memperbarui jQuery Anda.

raphie
sumber
2
seharusnya ini adalah cara yang lebih efisien untuk melakukannya menurut WebStorm 8.
dbinott
2
Meskipun jawaban ini berwawasan luas dan membantu saya dengan masalah yang saya alami, untuk memperbaiki, itu tidak menjawab pertanyaan dengan benar: Harap dicatat bahwa ini bukan menanyakan bagaimana mendapatkan nilai teks yang dipilih, tetapi hanya salah satu dari mereka, apakah dipilih atau tidak, tergantung pada atribut nilai.
StubbornShowaGuy
109

Berdasarkan HTML asli yang diposting oleh Paolo, saya menemukan yang berikut ini.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Telah diuji untuk berfungsi di Internet Explorer dan Firefox.

asyadiqin
sumber
11
Alternatif untuk ini adalah: $ ("option: selected", this) .text ()
Doug S
Ini adalah jawaban yang lebih baik karena ini merupakan skenario kompleks bukan hanya html statis dan kejadian javascript sederhana.
oasisfleeting
37
$("#list option:selected").each(function() {
   alert($(this).text());
});  

untuk beberapa nilai yang dipilih dalam #listelemen.

m3ct0n
sumber
37
  1. Jika hanya ada satu tag pilih di halaman maka Anda dapat menentukan pilih di dalam id 'daftar'

    jQuery("select option[value=2]").text();
  2. Untuk mendapatkan teks yang dipilih

    jQuery("select option:selected").text();
Beena Shetty
sumber
24

Coba yang berikut ini:

$("#list option[value=2]").text();

Alasan mengapa cuplikan asli Anda tidak berfungsi adalah karena OPTIONtag Anda adalah anak-anak dari SELECTtag Anda , yang memiliki id list.

Andrew Moore
sumber
19

Ini adalah pertanyaan lama yang belum diperbarui dalam beberapa waktu cara yang benar untuk melakukan ini sekarang adalah dengan menggunakannya

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

Saya harap ini membantu :-)

mindmyweb
sumber
Ini jelas tidak benar. Harap dicatat bahwa ini tidak menanyakan bagaimana cara mendapatkan nilai teks yang dipilih
Wesley Smith
17

Saya ingin mendapatkan label yang dipilih. Ini bekerja untuk saya di jQuery 1.5.1.

$("#list :selected").text();
Dilantha
sumber
17
$(this).children(":selected").text()
Avinash Saini
sumber
Sayangnya, ini tidak berfungsi ketika Anda memiliki optgrouptag sebagai anak Anda selectdan opsi yang dipilih ada di sini optgroup. gunakan $("#list option:selected").text();yang berfungsi bahkan dalam kasus ini
MartinM
13
$("#list [value='2']").text();

sisakan spasi setelah pemilih id.

Senin
sumber
13

Anda bisa mendapatkan teks opsi yang dipilih dengan menggunakan fungsi .text();

Anda dapat memanggil fungsi seperti ini:

jQuery("select option:selected").text();
Dilipkumar63
sumber
10

Sementara "perulangan" melalui elemen pilih yang dibuat secara dinamis dengan .each (fungsi () ...): $("option:selected").text();dan$(this + " option:selected").text() tidak mengembalikan teks opsi yang dipilih - sebaliknya itu null.

Tetapi solusi Peter Mortensen berhasil:

$(this).find("option:selected").text();

Saya tidak tahu mengapa cara biasa tidak berhasil dalam .each() (mungkin kesalahan saya sendiri), tetapi terima kasih, Peter. Saya tahu itu bukan pertanyaan awal, tetapi saya menyebutkan "untuk pemula yang datang melalui Google."

Saya akan mulai dengan $('#list option:selected").each()kecuali saya perlu mengambil barang-barang dari elemen pilih juga.

keabadian
sumber
8

Menggunakan:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }
    });
}

jQuery(document).ready(function(){
    selected_state();
});
Mary Daisy Sanchez
sumber
5

Saya sedang mencari val dengan nama bidang internal, bukan ID dan datang dari google ke posting ini yang membantu tetapi tidak menemukan solusi yang saya butuhkan, tapi saya mendapat solusinya dan ini dia:

Jadi ini mungkin membantu seseorang mencari nilai yang dipilih dengan nama internal bidang alih-alih menggunakan id panjang untuk daftar SharePoint:

var e = $('select[title="IntenalFieldName"] option:selected').text(); 
FAA
sumber
Solusi yang solid. Maaf itu di tempat rahasia di sini. Anda mungkin ingin mencari tempat yang lebih menonjol untuk memberikan solusi ini. Mungkin Anda bisa bertanya dan menjawab pertanyaan Anda sendiri?
Andrew Kozak
4

Saya membutuhkan jawaban ini karena saya berurusan dengan objek yang dilemparkan secara dinamis, dan metode lain di sini sepertinya tidak berfungsi:

element.options[element.selectedIndex].text

Ini tentu saja menggunakan objek DOM alih-alih parsing HTML-nya dengan nodeValue, childNodes, dll.

Martin Clemens Bloch
sumber
3

Sebagai solusi alternatif, Anda juga dapat menggunakan bagian konteks pemilih jQuery untuk menemukan <option>elemen dengan value="2"di dalam daftar dropdown:

$("option[value='2']", "#list").text();
Penglihatan
sumber
2

Saya ingin versi dinamis untuk beberapa pilihan yang akan menampilkan apa yang dipilih di sebelah kanan (berharap saya sudah membaca dan melihat $(this).find... sebelumnya):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>
Gordon
sumber
2

Anda bisa mendapatkan salah satu dari cara berikut

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Anfath Hifans
sumber