Mengambil teks dari <option> yang dipilih di elemen <select>

Berikut ini:

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

Bagaimana saya bisa mendapatkan teks dari opsi yang dipilih (yaitu "Test One" atau "Test Two") menggunakan JavaScript

document.getElementsById('test').selectedValue mengembalikan 1 atau 2, properti apa yang mengembalikan teks dari opsi yang dipilih?

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

Jika Anda menggunakan jQuery maka Anda dapat menulis kode berikut:

$("#selectId option:selected").html();

document.getElementById('test').options[document.getElementById('test').selectedIndex].text;

Di bawah HTML5 Anda dapat melakukan ini:

document.getElementById('test').selectedOptions[0].text

Dokumentasi MDN di https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions menunjukkan dukungan lintas-browser penuh (paling tidak Desember 2017), termasuk Chrome, Firefox, Edge dan browser ponsel , tetapi tidak termasuk Internet Explorer.

selectElement.options[selectElement.selectedIndex].text;

Referensi:

• koleksi opsi, propertiIndex yang dipilih: HTML DOM Select Object
• properti teks: Objek Opsi DOM HTML
• persis jawaban dari pertanyaan ini: Opsi teks Properti

The optionsproperti berisi semua <options>- dari sana Anda dapat melihat.text

document.getElementById('test').options[0].text == 'Text One'

Anda dapat menggunakan selectedIndexuntuk mengambil yang dipilih saat ini option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text

this.options [this.selectedIndex] .innerText

Jika Anda menemukan utas ini dan ingin tahu cara mendapatkan teks opsi yang dipilih melalui acara di sini adalah kode contoh:

alert(event.target.options[event.target.selectedIndex].text);

Gunakan objek daftar pilih, untuk mengidentifikasi indeks opsi yang dipilih sendiri. Dari sana - ambil HTML bagian dalam indeks itu. Dan sekarang Anda memiliki string teks dari opsi itu.

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>

Mirip dengan @artur tanpa jQuery, dengan javascript biasa:

// Menggunakan variabel "elt" @ Sean-bright

var selection=elt.options[elt.selectedIndex].innerHTML;

Cara mudah dan sederhana:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;