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

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

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

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

運(yùn)行結(jié)果如圖所示：

1. 標(biāo)簽屬性

1) name屬性

同所有其它表單元素相同，下拉列表要想被正確提交，也需要設(shè)置 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>

運(yùn)行結(jié)果如圖所示：

通過(guò)運(yùn)行結(jié)果可以發(fā)現(xiàn)，name 屬性并不會(huì)顯示在頁(yè)面上。下拉列表的 name 屬性同 <input> 標(biāo)簽的 name 屬性作用相同，主要用來(lái)提交數(shù)據(jù)。

2) size屬性

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

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

谷歌瀏覽器的運(yùn)行結(jié)果：

再來(lái)看一下 IE 瀏覽器的運(yùn)行結(jié)果：

通過(guò)比較運(yùn)行結(jié)果我們可以發(fā)現(xiàn)，不同瀏覽器對(duì)于一些標(biāo)簽會(huì)有不同的樣式設(shè)置。 css 可以改變樣式。

3) multiple屬性

下拉列表默認(rèn)只允許選擇一個(gè)選項(xiàng)，如果允許用戶選擇多個(gè)，就要用到 multiple 屬性。當(dāng) multiple 屬性值等于 multiple 時(shí)，表示允許用戶選擇多個(gè)選項(xiàng)。我們來(lái)看一下具體使用方法：

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

運(yùn)行結(jié)果如圖所示（谷歌瀏覽器）：

注意：此時(shí)只需按住ctrl+鼠標(biāo)左鍵就可以選擇多個(gè)選項(xiàng)。multiple=“multiple” 可以簡(jiǎn)寫為 multiple。

4) disabled屬性

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

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

運(yùn)行結(jié)果如圖所示：

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

上述為 <select> 標(biāo)簽的屬性，接下來(lái)我們看一下 <option> 標(biāo)簽的屬性。

2. 標(biāo)簽屬性

1) selected屬性

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

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

運(yùn)行結(jié)果如圖所示：

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

2) value屬性

<option> 標(biāo)簽的 value 屬性用來(lái)定義當(dāng)下拉列表在提交時(shí)，發(fā)送給服務(wù)器的值。value 值并不會(huì)顯示在頁(yè)面上。使用方法如下：

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

運(yùn)行結(jié)果如圖所示：

3) disabled屬性

<option> 標(biāo)簽也有 disabled 屬性，不同于 <selected> 標(biāo)簽的 disabled 屬性，它只能禁用列表中的某一項(xiàng)。

3. 總結(jié)

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

• <select> 標(biāo)簽的 name 屬性不顯示在頁(yè)面上，主要用來(lái)提交數(shù)據(jù)；
• <option> 標(biāo)簽的 value 屬性也不顯示在頁(yè)面上，主要用來(lái)定義提交給服務(wù)器的值；
• <option> 標(biāo)簽的 disabled 屬性禁用的是列表中的某一項(xiàng)；
• <select> 標(biāo)簽的 disabled 屬性禁用的是整個(gè)列表。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。