jQuery mendapatkan teks tag opsi tertentu

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.

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

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

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

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.

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.

$("#list option:selected").each(function() {
   alert($(this).text());
});  

untuk beberapa nilai yang dipilih dalam #listelemen.

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

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.

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

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

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

$(this).children(":selected").text()

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

sisakan spasi setelah pemilih id.

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

Anda dapat memanggil fungsi seperti ini:

jQuery("select option:selected").text();

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.

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

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

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.

Kiat: Anda dapat menggunakan kode di bawah ini jika nilai Anda dinamis:

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

Atau (gaya yang lebih baik)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

Seperti yang disebutkan dalam jQuery dapatkan teks tag opsi tertentu dan menempatkan variabel dinamis ke nilai

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

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>

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>