Đối tượng tùy chọn DOM HTML đại diện cho phần tử
Bây giờ chúng ta hãy xem cách tạo đối tượng tùy chọn -
Cú pháp
Sau đây là cú pháp -
document.createElement(“OPTION”);
Thuộc tính
Sau đây là các thuộc tính của đối tượng tùy chọn -
| Thuộc tính | Giải thích |
|---|---|
| bị vô hiệu hóa | Nó trả về và sửa đổi xem phần tử tùy chọn có bị vô hiệu hóa hay không. |
| defaultSelected | Nó trả về giá trị mặc định của phần tử tùy chọn trong tài liệu HTML. |
| biểu mẫu | Nó trả về tham chiếu của biểu mẫu có chứa phần tử tùy chọn trong tài liệu HTML. |
| chỉ mục | Nó trả về và sửa đổi vị trí chỉ mục của một tùy chọn trong tài liệu HTML. |
| nhãn | Nó trả về và thay đổi giá trị của thuộc tính nhãn của một tùy chọn trong tài liệu HTML. |
| đã chọn | Nó trả về và thay đổi giá trị của thuộc tính đã chọn của một tùy chọn. |
| văn bản | Nó trả về và sửa đổi văn bản của một tùy chọn. |
| giá trị | Nó trả về và sửa đổi giá trị của một tùy chọn sẽ được gửi qua máy chủ. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về đối tượng tùy chọn HTML DOM -
<!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>DOM option Object Demo</h1>
<select class="drop-down"></select>
<button onclick="createDropDownList()" class="btn">Create a drop-down option</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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào “ Tạo tùy chọn thả xuống ”Để tạo một đối tượng tùy chọn và sau đó thêm nó vào danh sách thả xuống.
