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>

這將產生以下輸出：