การดึงข้อความของ <option> ที่เลือกในองค์ประกอบ <select>

ในต่อไปนี้:

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

ฉันจะได้รับข้อความของตัวเลือกที่เลือก (เช่น "ทดสอบหนึ่ง" หรือ "ทดสอบสอง") โดยใช้ JavaScript

document.getElementsById('test').selectedValue ส่งคืน 1 หรือ 2 คุณสมบัติใดที่ส่งคืนข้อความของตัวเลือกที่เลือก?

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

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

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

var text = getSelectedText('test');

หากคุณใช้ jQuery คุณสามารถเขียนรหัสต่อไปนี้:

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

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

ภายใต้ HTML5 คุณสามารถทำสิ่งนี้ได้:

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

เอกสารของ MDN ที่https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptionsระบุว่ารองรับเบราว์เซอร์เต็มรูปแบบ (อย่างน้อยธันวาคม 2017) รวมถึง Chrome, Firefox, Edge และเบราว์เซอร์มือถือ แต่ไม่รวม Internet Explorer

selectElement.options[selectElement.selectedIndex].text;

อ้างอิง:

• คอลเล็กชันตัวเลือกคุณสมบัติSelectedIndex : HTML DOM เลือกวัตถุ
• คุณสมบัติข้อความ: วัตถุตัวเลือก HTML DOM
• คำตอบของคำถามนี้อย่างแน่นอน: คุณสมบัติข้อความตัวเลือก

optionsคุณสมบัติที่มีทุก<options>- จากนั้นคุณสามารถดู.text

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

คุณสามารถใช้selectedIndexเพื่อดึงข้อมูลปัจจุบันที่เลือกoption:

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

this.options [this.selectedIndex] .innerText

หากคุณพบกระทู้นี้และต้องการทราบวิธีรับข้อความตัวเลือกที่เลือกผ่านเหตุการณ์ที่นี่คือตัวอย่างรหัส:

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

ใช้วัตถุรายการที่เลือกเพื่อระบุดัชนีตัวเลือกที่เลือก จากตรงนั้น - คว้า HTML ภายในของดัชนีนั้น และตอนนี้คุณมีสตริงข้อความของตัวเลือกนั้น

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

คล้ายกับ @artur เพียงปราศจาก jQuery โดยมี javascript ธรรมดา:

// การใช้ตัวแปร "elt" ของ @ Sean-bright

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

ง่ายวิธีง่ายๆ:

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