Đối tượng Option trong HTML DOM đại diện cho phần tử <option> của một tài liệu HTML.
Hãy xem cách tạo đối tượng option:
Cú pháp
Cú pháp như sau:
document.createElement(“OPTION”);
Các thuộc tính
Dưới đây là các thuộc tính của đối tượng Option:
| Thuộc tính | Giải thích |
|---|---|
| disabled | Trả về và cho phép thay đổi xem phần tử option có bị vô hiệu hóa hay không. |
| defaultSelected | Trả về giá trị mặc định của phần tử option trong tài liệu HTML. |
| form | Trả về tham chiếu của form chứa phần tử option trong tài liệu HTML. |
| index | Trả về và cho phép thay đổi vị trí chỉ số của một option trong tài liệu HTML. |
| label | Trả về và cho phép thay đổi giá trị thuộc tính label của một option trong tài liệu HTML. |
| selected | Trả về và cho phép thay đổi giá trị thuộc tính selected của một option. |
| text | Trả về và cho phép thay đổi văn bản của một option. |
| value | Trả về và cho phép thay đổi giá trị của một option sẽ được gửi lên server. |
Ví dụ
Dưới đây là ví dụ về đối tượng HTML DOM Option:
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; background-color:#fff; color:#0197F6; } h1{ color:#23CE6B; } .btn{ background-color:#fff; border:1.5px dashed #0197F6; height:2rem; border-radius:2px; width:60%; margin:2rem auto; display:block; color:#0197F6; outline:none; cursor:pointer; } </style> </head> <body> <h1>Demo đối tượng DOM Option</h1> <select class="drop-down"></select> <button onclick="createDropDownList()" class="btn">Tạo một tùy chọn dropdown</button> <script> function createDropDownList() { var option = document.createElement("option"); option.setAttribute("value","Hello"); option.innerText='Hello'; document.querySelector(".drop-down").appendChild(option); } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Nhấn vào nút 「Tạo một tùy chọn dropdown」 để tạo một đối tượng option và thêm nó vào danh sách thả xuống.
