下拉列表是網頁中一種最節(jié)省頁面空間的選擇方式，默認狀態(tài)下只顯示一個選項，只有單擊下拉按鈕后才能看到全部的選項。
我們都知道無序列表由 <ul><li> 配合使用，有序列表由 <ol><li> 配合使用。HTML 下拉列表與它們類似，是由 <select><option> 配合使用的。具體語法格式如下：

<select><option></option> </select>

其中，<select> 標簽用來創(chuàng)建一個下拉列表，<option> 標簽表示下拉列表中的每一項（條目）。接下來我們看一個示例：

<form action="" method="post">段位區(qū)間：<select><option>大師</option><option>王者</option><option>青銅</option><option>黑鐵</option></select> </form>

運行結果如圖所示：

1. 標簽屬性

1) name屬性

同所有其它表單元素相同，下拉列表要想被正確提交，也需要設置 name 屬性。代碼如下：

<form action="" method="post">年齡區(qū)間：<select name="selectList"><option>18歲以下</option><option>18-28歲</option><option>28-38歲</option><option>38歲以上</option></select> </form>

運行結果如圖所示：

通過運行結果可以發(fā)現(xiàn)，name 屬性并不會顯示在頁面上。下拉列表的 name 屬性同 <input> 標簽的 name 屬性作用相同，主要用來提交數據。

2) size屬性

在文章的開始我們提到過，下拉列表默認狀態(tài)下只顯示一個選項。如果需要讓頁面顯示多個選項，就要使用 size 屬性。我們來看一下具體的使用方法：

<form action="" method="post">年齡區(qū)間：<select name="selectList" size="4"><option>18歲以下</option><option>18-28歲</option><option>28-38歲</option><option>38歲以上</option></select> </form>

谷歌瀏覽器的運行結果：

再來看一下 IE 瀏覽器的運行結果：

通過比較運行結果我們可以發(fā)現(xiàn)，不同瀏覽器對于一些標簽會有不同的樣式設置。 css 可以改變樣式。

3) multiple屬性

下拉列表默認只允許選擇一個選項，如果允許用戶選擇多個，就要用到 multiple 屬性。當 multiple 屬性值等于 multiple 時，表示允許用戶選擇多個選項。我們來看一下具體使用方法：

<form action="" method="post">年齡區(qū)間：<select name="selectList" multiple="multiple" size="4"><option>18歲以下</option><option>18-28歲</option><option>28-38歲</option><option>38歲以上</option></select> </form>

運行結果如圖所示（谷歌瀏覽器）：

注意：此時只需按住ctrl+鼠標左鍵就可以選擇多個選項。multiple=“multiple” 可以簡寫為 multiple。

4) disabled屬性

disabled 屬性可以禁用下拉列表，使其不能再獲得焦點或被修改。被禁用后，它的值不會提交。具體使用方法如下：

<form action="" method="post">年齡區(qū)間：<select name="selectList" multiple="multiple" size="4" disabled><option>18歲以下</option><option>18-28歲</option><option>28-38歲</option><option>38歲以上</option></select> </form>

運行結果如圖所示：

通過運行結果可以發(fā)現(xiàn)，下拉列表的每一項都被“灰化”（gray-out）了，而且不可以被選擇。

上述為 <select> 標簽的屬性，接下來我們看一下 <option> 標簽的屬性。

2. 標簽屬性

1) selected屬性

在為 <select> 標簽設置了 multiple 屬性后，就可以通過 標簽的selected="selected"實現(xiàn)某一項的預先選中。具體使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">年齡區(qū)間：<select name="selectList" multiple><option selected="selected">18歲以下</option><option>18-28歲</option><option selected="selected">28-38歲</option><option>38歲以上</option></select> </form>

運行結果如圖所示：

通過運行結果可以發(fā)現(xiàn)，設置了selected="selected"屬性的項被預先選中，呈深灰色。

2) value屬性

<option> 標簽的 value 屬性用來定義當下拉列表在提交時，發(fā)送給服務器的值。value 值并不會顯示在頁面上。使用方法如下：

<form action="http://vip.biancheng.net/login.php" method="post">年齡區(qū)間： <select name="selectList" multiple><option selected="selected" value="underage">18歲以下</option><option value="teens">18-28歲</option><option selected="selected" value="youth">28-38歲</option><option value="more">38歲以上</option></select> </form>

運行結果如圖所示：

3) disabled屬性

<option> 標簽也有 disabled 屬性，不同于 <selected> 標簽的 disabled 屬性，它只能禁用列表中的某一項。

3. 總結

實際上，multiple 和 size 這兩個屬性只要設置了其中一個，下拉列表就可以顯示多項。如果只設置 size，而不設置 multiple，得到的是一個不允許多選但是可以顯示多項的下拉列表；

• <select> 標簽的 name 屬性不顯示在頁面上，主要用來提交數據；
• <option> 標簽的 value 屬性也不顯示在頁面上，主要用來定義提交給服務器的值；
• <option> 標簽的 disabled 屬性禁用的是列表中的某一項；
• <select> 標簽的 disabled 屬性禁用的是整個列表。

總結

以上是生活随笔為你收集整理的21、HTML ＜select＞标签（下拉列表）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。