Lấy nội dung của chọn <option> trong <select> yếu tố

Question

Trong điều sau đây:

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

Làm thế nào tôi có thể nhận được nội dung của phương án chọn (tức là "Test One" hoặc "thử nghiệm thứ hai") 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?

Answer 1

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

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

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

var text = getSelectedText('test'); 

Answer 2

Thuộc tính options chứa tất cả các <options> - từ đó bạn có thể nhìn vào .text

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

Answer 3

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

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

Answer 4

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

Answer 5

Tương tự như @artur mà không cần jQuery, với javascript đơn giản:

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

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

Answer 6

Dưới HTML5 bạn sẽ có thể để làm điều này:

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

Tuy nhiên, hỗ trợ trình duyệt đang thiếu hiện nay. Chrome 27 (hiện tại vào thời điểm viết bài) hỗ trợ điều này, nhưng, hãy xem lỗi nổi bật cho Mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=596681 cho biết hiện tại không có lỗi.

Answer 7

selectElement.options[selectElement.selectedIndex].text; 

Tài liệu tham khảo:

• tùy chọn bộ sưu tập, tài sản selectedIndex: HTML DOM Select Object
• bất động sản văn bản: HTML DOM Option Object
• chính xác câu trả lời của câu hỏi này: Option text Property

Answer 8

Nếu bạn thấy điều này chủ đề và muốn biết cách nhận tùy chọn đã chọn văn bản thông qua sự kiện ở đây là mẫu mã:

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

Answer 9

this.options [this.selectedIndex] .innerText

Answer 10

Sử dụng chọn đối tượng danh sách, để xác định chỉ số tùy chọn đã chọn riêng của mình. 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> 

Answer 11

Bạn có thể sử dụng selectedIndex để lấy được lựa chọn hiện tại option:

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