HTMLSelectElement

Thuộc tính thể hiện

Giao diện này kế thừa các thuộc tính của HTMLElement, cũng như của Element và Node.

HTMLSelectElement.autocomplete

Một giá trị chuỗi phản ánh thuộc tính autocomplete, cho biết trình duyệt có thể tự động hoàn thành giá trị của điều khiển hay không.

HTMLSelectElement.disabled

Một giá trị boolean phản ánh thuộc tính HTML disabled, cho biết điều khiển có bị vô hiệu hóa hay không. Nếu bị vô hiệu hóa, nó không nhận lần nhấp.

HTMLSelectElement.form Read only

Một HTMLFormElement tham chiếu đến biểu mẫu mà phần tử này được liên kết. Nếu phần tử không được liên kết với phần tử <form>, nó trả về null.

HTMLSelectElement.labels Read only

Một NodeList gồm các phần tử <label> được liên kết với phần tử.

HTMLSelectElement.length

Một unsigned long cho biết số lượng phần tử <option> trong phần tử select này.

HTMLSelectElement.multiple

Một giá trị boolean phản ánh thuộc tính HTML multiple, cho biết có thể chọn nhiều mục hay không.

HTMLSelectElement.name

Một chuỗi phản ánh thuộc tính HTML name, chứa tên của điều khiển này được máy chủ và các hàm tìm kiếm DOM sử dụng.

HTMLSelectElement.options Read only

Một HTMLOptionsCollection đại diện cho tập hợp các phần tử <option> (HTMLOptionElement) có trong phần tử này.

HTMLSelectElement.required

Một giá trị boolean phản ánh thuộc tính HTML required, cho biết người dùng có bắt buộc phải chọn một giá trị trước khi gửi biểu mẫu hay không.

HTMLSelectElement.selectedIndex

Một long phản ánh chỉ số của phần tử <option> đầu tiên được chọn. Giá trị -1 cho biết không có phần tử nào được chọn.

HTMLSelectElement.selectedOptions Read only

Một HTMLCollection đại diện cho tập hợp các phần tử <option> đang được chọn.

HTMLSelectElement.size

Một long phản ánh thuộc tính HTML size, chứa số lượng mục hiển thị trong điều khiển. Mặc định là 1, trừ khi multiple là true, khi đó là 4.

HTMLSelectElement.type Read only

Một chuỗi đại diện cho kiểu của điều khiển biểu mẫu. Khi multiple là true, nó trả về "select-multiple"; ngược lại, nó trả về "select-one".

HTMLSelectElement.validationMessage Read only

Một chuỗi đại diện cho thông báo đã được bản địa hóa mô tả các ràng buộc xác thực mà điều khiển không thỏa mãn (nếu có). Thuộc tính này là chuỗi rỗng nếu điều khiển không phải là ứng viên cho xác thực ràng buộc (willValidate là false), hoặc nó thỏa mãn các ràng buộc của mình.

HTMLSelectElement.validity Read only

Một ValidityState phản ánh trạng thái hợp lệ mà điều khiển này đang ở.

HTMLSelectElement.value

Một chuỗi phản ánh giá trị của điều khiển biểu mẫu. Trả về thuộc tính value của phần tử tùy chọn được chọn đầu tiên nếu có, nếu không thì là chuỗi rỗng.

HTMLSelectElement.willValidate Read only

Một giá trị boolean cho biết nút có phải là ứng viên cho xác thực ràng buộc hay không. Nó là false nếu bất kỳ điều kiện nào ngăn nó xác thực ràng buộc.

Phương thức thể hiện

Giao diện này kế thừa các phương thức của HTMLElement, cũng như của Element và Node.

HTMLSelectElement.add()

Thêm một phần tử vào tập hợp các phần tử option của phần tử select này.

HTMLSelectElement.checkValidity()

Kiểm tra xem phần tử có bất kỳ ràng buộc nào hay không và nó có thỏa mãn chúng hay không. Nếu phần tử không thỏa mãn các ràng buộc của nó, trình duyệt sẽ kích hoạt sự kiện invalid có thể hủy tại phần tử đó (và trả về false).

HTMLSelectElement.item()

Lấy một mục từ tập hợp tùy chọn của phần tử <select> này. Bạn cũng có thể truy cập một mục bằng cách chỉ định chỉ số trong dấu ngoặc vuông hoặc ngoặc đơn mà không cần gọi phương thức này trực tiếp.

HTMLSelectElement.namedItem()

Lấy mục trong tập hợp tùy chọn có tên được chỉ định. Chuỗi tên có thể khớp với thuộc tính id hoặc name của một nút option. Bạn cũng có thể truy cập một mục bằng cách chỉ định tên trong dấu ngoặc vuông hoặc ngoặc đơn mà không cần gọi phương thức này trực tiếp.

HTMLSelectElement.remove()

Xóa phần tử tại chỉ số được chỉ định khỏi tập hợp tùy chọn của phần tử select này.

HTMLSelectElement.reportValidity()

Phương thức này báo cáo các vấn đề về ràng buộc của phần tử, nếu có, cho người dùng. Nếu có vấn đề, nó kích hoạt sự kiện invalid có thể hủy tại phần tử và trả về false; nếu không có vấn đề, nó trả về true.

HTMLSelectElement.setCustomValidity()

Đặt thông báo hợp lệ tùy chỉnh cho phần tử selection thành thông báo được chỉ định. Dùng chuỗi rỗng để cho biết phần tử không có lỗi hợp lệ tùy chỉnh.

showPicker()

Hiển thị trình chọn tùy chọn.

Sự kiện

Giao diện này kế thừa các sự kiện của HTMLElement, cũng như của Element và Node.

Lắng nghe các sự kiện này bằng addEventListener() hoặc bằng cách gán một trình lắng nghe sự kiện cho thuộc tính oneventname của giao diện này:

change event

Được kích hoạt khi người dùng chọn một tùy chọn.

input event

Được kích hoạt khi giá trị value của phần tử <input>, <select>, hoặc <textarea> đã thay đổi.

Ví dụ

Lấy thông tin về tùy chọn đã chọn

/* assuming we have the following HTML
<select id='s'>
    <option>First</option>
    <option selected>Second</option>
    <option>Third</option>
</select>
*/

const select = document.getElementById("s");

// return the index of the selected option
console.log(select.selectedIndex); // 1

// return the value of the selected option
console.log(select.options[select.selectedIndex].value); // Second

Cách tốt hơn để theo dõi thay đổi trong lựa chọn của người dùng là lắng nghe sự kiện change xảy ra trên <select>. Điều này sẽ cho bạn biết khi nào giá trị thay đổi, sau đó bạn có thể cập nhật bất kỳ thứ gì cần thiết. Xem ví dụ được cung cấp trong tài liệu của sự kiện change để biết chi tiết.

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Phần tử HTML <select>, phần tử triển khai giao diện này.