詳解select屬性

一、基本介紹

HTML中的<select>標籤是用來創建下拉列表的，可以用於選擇單一或多個值。在select標籤中，我們使用attribute（屬性）來定義下拉列表的行為以及外觀風格（如大小、邊框等）。有四個主要的屬性：size、multiple、disabled和form。同時，我們可以使用JavaScript來使下拉列表更加智能化。

二、select標籤屬性詳解

1、size屬性

size屬性決定了下拉列表中可以同時展示多少個選項。一個普通的下拉列表默認的size為1，也就是說，只有一個選項顯示在列表中。如果你想增加下拉項的數量，你可以設置一個大於1的數值，比如：<select size=”4″>，表示最多可以同時展示4個選項。

<select name="sizeDemo" size="4"> 
    <option value="1">選項1</option> 
    <option value="2">選項2</option> 
    <option value="3">選項3</option> 
    <option value="4">選項4</option> 
</select>

2、multiple屬性

multiple屬性表示是否支持多選。如果設置為multiple=”multiple”，那麼就能夠選擇多個選項，但是如果不加這個屬性或者在單選狀態下試圖選擇多個選項，則web瀏覽器會自動忽略多餘的選擇動作。

<select name="multipleDemo" multiple="multiple"> 
    <option value="a">選項A</option> 
    <option value="b">選項B</option> 
    <option value="c">選項C</option> 
    <option value="d">選項D</option> 
</select>

3、disabled屬性

disabled屬性表示下拉列表是否禁止用戶交互。設置了這個屬性以後用戶就無法選擇下拉框中的選項。

<select name="disabledDemoOne" disabled="disabled"> 
    <option value="1">選項1</option> 
    <option value="2">選項2</option> 
    <option value="3">選項3</option> 
    <option value="4">選項4</option> 
</select>

4、form屬性

form屬性表示當前下拉列表所屬的form表單。

<select name="formDemo" form="formId"> 
    <option value="1">選項1</option> 
    <option value="2">選項2</option> 
    <option value="3">選項3</option> 
    <option value="4">選項4</option> 
</select>

三、與JavaScript的結合使用

我們可以使用JavaScript為下拉列表添加更多的交互性，比如在列表中選擇一個選項時，展現出相應的信息。這裡我們展示一個例子，當列表中的條目被選中時，會顯示相應選項的詳細說明信息。

<div class="container">
  <select id="pet-select">
    <option value=""></option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
  </select>

  <div>
    <h3 id="desc"></h3>
    <p id="caption"></p>
  </div>
</div>

<script>
var petSelect = document.getElementById("pet-select");
var desc = document.getElementById("desc");
var caption = document.getElementById("caption");

petSelect.addEventListener("change", function() {
  desc.innerHTML = "";
  caption.innerHTML = "";

  if (this.value === "") {
    return;
  }

  desc.innerHTML = "You selected: " + this.value;
  caption.innerHTML = "Image of " + this.value;
  
});
</script>

總結

這篇文章介紹了HTML中的下拉列表，詳細講解了select標籤的四個主要屬性，並提供了一個結合JavaScript的例子，展示了下拉列表和JavaScript的交互性。