Cách lấy văn bản được chọn của hộp Javascript

79

Điều này hoạt động hoàn hảo

<select name="selectbox" onchange="alert(this.value)">

Nhưng tôi muốn chọn văn bản. Tôi đã thử theo cách này

<select name="selectbox" onchange="alert(this.text)">

Nó hiển thị không xác định. Tôi đã tìm thấy cách sử dụng DOM để lấy văn bản. Nhưng tôi muốn làm điều này theo cách này, tôi có nghĩa là chỉ sử dụng this.value.

javascript select

— Aajahid
nguồn

126

this.options[this.selectedIndex].innerHTML

sẽ cung cấp cho bạn văn bản "hiển thị" của mục đã chọn. this.value, như bạn đã nói, chỉ cung cấp giá trị của valuethuộc tính.

— Delan Azabani
nguồn

6

Tôi không thích nó. Mặc dù tôi chắc chắn rằng nó hoạt động trên các trình duyệt hiện tại, nhưng nó là một hỗn hợp kỳ lạ giữa mã dựa trên phần tử DOM và mã thao tác biểu mẫu kiểu cũ. optionstrả về một danh sách các Optionđối tượng, mà tôi không chắc được chỉ định ở bất kỳ đâu để giống với <option>các phần tử. Tốt hơn là sử dụng texttài sản lâu đời của người đã chọn Option, được đảm bảo hoạt động.

— Tim Down

Tim, Optionvật giống như HTMLOptionElementvật. Nếu bạn phản đối sử dụng options, bạn có thể sử dụng cách khác childrenhoặc childNodesthay (không thể nhớ chính xác cái nào, tôi nghĩ rằng cả hai đều làm việc)

— Delan Azabani

1

Tôi nghĩ rằng bạn hiểu nhầm một chút: Tôi hoàn toàn ủng hộ việc sử dụng options, nhưng Optioncác đối tượng có trước HTMLOptionElementcác đối tượng và không có đặc điểm kỹ thuật nào mà tôi thấy rằng bắt buộc điều đó Optionvà HTMLOptionElementphải giống nhau, mặc dù chúng cũng có thể có trong hầu hết các trình duyệt hỗ trợ cả hai. Quan điểm của tôi là sẽ an toàn hơn nếu không kết hợp hai phong cách. Vì vậy, tôi muốn this.options[this.selectedIndex].texthoặc một thứ dựa trên nút selectedIndex, điều này phức tạp do cần phải lọc ra các nút văn bản khoảng trắng trong IE.

— Tim Down

Đó là một điểm rất tốt. Chỉ vì tò mò, nếu bạn có các nút không phải văn bản bên trong các nút tùy chọn, liệu có texttrả về innerHTMLhoặc chỉ tất cả các nút văn bản được kết hợp không?

— Delan Azabani

1

Hỡi mọi người, đừng bỏ phiếu bất tài nữa! Oded có câu trả lời chính xác. Khó như thế nào để nghiên cứu khái niệm DOM? > __>

— John

68

Để nhận được giá trị của mục đã chọn, bạn có thể làm như sau:

this.options[this.selectedIndex].text

Ở đây, optionscác lựa chọn khác nhau được truy cập và SelectedIndexđược sử dụng để chọn lựa chọn đã chọn, sau đó nó textđang được truy cập.

Đọc thêm về DOM được chọn tại đây .

— Oded
nguồn

1

this.options[this.selectedIndex].valuegiống hệt như this.value, xin lỗi.

— Delan Azabani

Khi tôi sử dụng this.options [this.SelectedIndex] .text lỗi giao diện điều khiển nói - Lỗi: this.options [this.SelectedIndex] là undefined

— Aajahid

3

SHAKTI: Đó là bởi vì nó selectedIndexhơn là SelectedIndex.

— Tim Down

2

Hoặc, chỉ để giải trí, this.selectedOptions[0].text(với các tiện ích mở rộng rõ ràng nếu bạn có nhiều lựa chọn).

— ruffin

37

Vui lòng thử mã này:

$("#YourSelect>option:selected").html()

— Andre Morata
nguồn

Vì vậy, cảm ơn! này trả về giá trị của mục đã chọn trong combobox

— saber tabatabaee Yazdi

.text () thực sự trả về văn bản đã chọn

— Windrider

33

Chỉ dùng

$('#SelectBoxId option:selected').text(); Để lấy văn bản như được liệt kê

$('#SelectBoxId').val(); Để lấy giá trị Chỉ mục đã chọn

— Marvil Joy
nguồn

2

Mặc dù điều này hoạt động hoàn hảo cho jQuery, OP chỉ liệt kê javascript như một thẻ gốc. Tuy nhiên, +1 vì rất nhiều người sử dụng jQuery.

— Sablefoste

1

Tôi biết không có ai yêu cầu giải pháp jQuery ở đây, nhưng có thể đáng nói rằng với jQuery, bạn chỉ có thể yêu cầu:$('#selectorid').val()

— Michiel
nguồn

0

Nếu bạn muốn nhận giá trị, bạn có thể sử dụng mã này cho một phần tử được chọn với id = "selectBox"

let myValue = document.querySelector("#selectBox").value;

Nếu bạn muốn lấy văn bản, bạn có thể sử dụng mã này

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;

— Michael Albers
nguồn