HTML DOM Select 对象

HTML DOM select 对象表示 HTML 文档中的 <select> 元素。

让我们看看如何创建 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 select 对象的示例：

实时演示

<!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>

这将产生以下输出：