怎樣使用select控件制作下拉菜單效果？select教程

瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉菜單如選擇所在的城市、出生年月、興趣愛(ài)好等。下按菜單，例Vowo日(Vono,示即為一個(gè)下拉菜單，當(dāng)單擊下拉符號(hào)時(shí)，會(huì)出現(xiàn)一個(gè)選擇列表。要想制作這種下拉菜單效果，就需會(huì)出用select控件。

使用<select>標(biāo)記定義下拉菜單的基本語(yǔ)法格式如下:

<select>
<option>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
...
</select>

在上面的語(yǔ)法中，<select></select>標(biāo)記用于在表單中添加一個(gè)下拉菜單，<option></option>標(biāo)記嵌套在<select></select>標(biāo)記中，用于定義下拉菜單中的具體選項(xiàng)，每對(duì)<select></select>中至少應(yīng)包含一對(duì)<option></option>。

值得一提的是，在HTML中，可以為<select>和<coptiono>標(biāo)記定義屬性，以改變下拉菜的外觀顯示效果，具體如表10-8所示。

表10-8 <select>和<option>標(biāo)記的常用屬性

在實(shí)際網(wǎng)頁(yè)制作過(guò)程中，有時(shí)候需要對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組，這樣當(dāng)存在很多選項(xiàng)時(shí)，找到相應(yīng)的選項(xiàng)會(huì)更加容易。圖10-17所示即為選項(xiàng)分組后的下拉菜單中選選項(xiàng)展示效果。

要想實(shí)現(xiàn)圖10-17所示的效果，可以在下拉菜單中使用<optgroup></optgroup>標(biāo)記，具體示例代碼如下:

日本行政級(jí)別:
<select>
<optgroup label="都">
<option>東京都</option>
</optgroup>
<optgroup label="道">
<option>北海道</option>
</optgroup>
<optgroup label="府">
<option>京都府</option>
<option>大阪府</option>
</optgroup>
<optgroup label="縣">
<option>青森縣</option>
<option>巖手縣</option>
<option>...</option>
</select>

示例代碼對(duì)應(yīng)效果，當(dāng)單擊下拉符號(hào)時(shí)，效果如圖10-19所示，下拉菜單中的選項(xiàng)被清晰地分組了。

圖10-19選項(xiàng)組后的下拉菜單

猜你喜歡：

Js變量轉(zhuǎn)為字符串類(lèi)型有哪些方法？

DeepLab系列各有什么特點(diǎn)？

如何制作HTML模板？[web前端培訓(xùn)]

為什么要使用input控件？

黑馬程序員web前端開(kāi)發(fā)課程