HTML DOM 选项对象

htmlweb developmentfront end technology更新于 2025/6/14 19:24:17

HTML DOM 选项对象表示 HTML 文档的 <option> 元素。

现在让我们看看如何创建选项对象 −

语法

以下是语法 −

document.createElement(“OPTION”);

属性

以下是 option 对象的属性 −

属性	说明
disabled	返回并修改 option 元素是否禁用。
defaultSelected	返回 HTML 文档中 option 元素的默认值。
form	返回 HTML 文档中包含 option 元素的表单的引用。
index	返回并修改选项在 HTML 文档中的索引位置。
label	返回并修改选项的 label 属性值HTML 文档。
selected	返回并修改选项的 selected 属性值。
text	返回并修改选项的文本。
value	返回并修改将要通过服务器发送的选项值。

示例

让我们看一个 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>