Truy xuất văn bản của phần tử <tùy chọn> đã chọn trong phần tử <select>

Trong những điều sau đây:

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

Làm cách nào tôi có thể nhận được văn bản của tùy chọn đã chọn (ví dụ: "Thử nghiệm một" hoặc "Thử nghiệm hai") bằng cách sử dụng JavaScript

document.getElementsById('test').selectedValue trả về 1 hoặc 2, thuộc tính nào trả về văn bản của tùy chọn đã chọn?

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

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

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

var text = getSelectedText('test');

Nếu bạn sử dụng jQuery thì bạn có thể viết đoạn mã sau:

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

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

selectElement.options[selectElement.selectedIndex].text;

Người giới thiệu:

• bộ sưu tập tùy chọn, thuộc tính được chọn: HTML DOM Chọn đối tượng
• thuộc tính văn bản: Đối tượng tùy chọn HTML DOM
• chính xác câu trả lời của câu hỏi này: Tùy chọn văn bản Thuộc tính

Trong HTML5, bạn có thể làm điều này:

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

Tài liệu của MDN tại https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectEuity/selectedOptions chỉ ra hỗ trợ trình duyệt chéo đầy đủ (ít nhất là vào tháng 12 năm 2017), bao gồm Chrome, Firefox, Edge và trình duyệt di động , nhưng không bao gồm Internet Explorer.

Tài optionssản chứa tất cả <options>- từ đó bạn có thể nhìn vào.text

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

Bạn có thể sử dụng selectedIndexđể truy xuất hiện tại đã chọn option:

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

this.options [this.selected Index] .innerText

Nếu bạn tìm thấy chủ đề này và muốn biết làm thế nào để có được văn bản tùy chọn đã chọn thông qua sự kiện ở đây là mã mẫu:

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

Sử dụng đối tượng danh sách chọn, để xác định chỉ mục tùy chọn đã chọn của chính nó. Từ đó - lấy HTML bên trong của chỉ mục đó. Và bây giờ bạn có chuỗi văn bản của tùy chọn đó.

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

Tương tự như @artur chỉ không có jQuery, với javascript đơn giản:

// Sử dụng biến "elt" của @ Sean-sáng

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

Cách dễ dàng, đơn giản:

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