資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究HTML DOM 選項物件
HTML DOM option 物件表示 HTML 文件的 <option> 元素。
現在讓我們看看如何建立 option 物件 −
語法
以下是語法 −
document.createElement(“OPTION”);
屬性
以下是 option 物件的屬性 −
| 屬性 | 說明 |
|---|---|
| disabled | 它返回並修改選項元素是否被停用。 |
| defaultSelected | 它返回 HTML 文件中 option 元素的預設值。 |
| form | 它返回 HTML 文件中包含 option 元素的表單的引用。 |
| index | 它返回並修改 HTML 文件中選項的索引位置。 |
| label | 它返回並更改 HTML 文件中選項的 label 屬性的值。 |
| selected | 它返回並修改選項的 selected 屬性的值。 |
| text | 它返回並修改選項的文字。 |
| value | 它返回並修改將傳送到伺服器的選項的值。 |
示例
讓我們看一個 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>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>輸出
程式碼將生成以下輸出 −
點選 “建立一個下拉選項” 按鈕來建立一個選項物件，然後將其新增到下拉列表中。
更新於:30-7-2019
163 次瀏覽
廣告