HTML DOM 选择对象

htmlweb developmentfront end technology更新于 2025/7/22 6:04:17

HTML DOM 选择对象代表 HTML 文档的 <select> 元素。

让我们看看如何创建选择对象

语法

以下是语法 −

document.createElement(“SELECT”);

属性

以下是 select 对象的属性 −

属性	说明
autofocus	返回并修改下拉列表在页面加载时是否获得焦点。
disabled	返回并修改下拉列表是否禁用。
length	返回 HTML 文档中下拉列表中
form	返回 HTML 中包含下拉列表的表单的引用
multiple	返回并修改下拉列表中是否可以选择多个选项。
name	返回并修改下拉列表的name属性的值。
size	返回并修改下拉列表的size属性的值。
type	返回下拉列表的type属性的值。
value	返回并修改下拉列表的value属性的内容。
selectedIndex	返回并修改HTML中下拉列表中选定选项的索引文档。

方法

以下是方法 −

方法	说明
add()	它向 HTML 文档中的下拉列表中添加一个新选项。
remove()	它从 HTML 文档中的下拉列表中删除一个新选项。
checkValidity()	它检查 HTML 文档中下拉列表的有效性。

示例

让我们看一个 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 select Object Demo</h1>
<button onclick="createDropDownList()" class="btn">Create a drop-down list</button>
<script>
   function createDropDownList() {
      var dropDown = document.createElement("SELECT");
      dropDown.innerHTML="<option>CAKE</option><option>PIZZA<option><option>BURGER</option>";
      document.body.appendChild(dropDown);
   }
</script>
</body>
</html>

这将产生以下输出 −