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

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

使用<select>標記定義下拉菜單的基本語法格式如下:

<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>

在上面的語法中，<select></select>標記用于在表單中添加一個下拉菜單，<option></option>標記嵌套在<select></select>標記中，用于定義下拉菜單中的具體選項，每對<select></select>中至少應包含一對<option></option>。

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

表10-8 <select>和<option>標記的常用屬性

在實際網(wǎng)頁制作過程中，有時候需要對下拉菜單中的選項進行分組，這樣當存在很多選項時，找到相應的選項會更加容易。圖10-17所示即為選項分組后的下拉菜單中選選項展示效果。

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

日本行政級別:
<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>

示例代碼對應效果，當單擊下拉符號時，效果如圖10-19所示，下拉菜單中的選項被清晰地分組了。

圖10-19選項組后的下拉菜單

猜你喜歡：

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

DeepLab系列各有什么特點？

如何制作HTML模板？[web前端培訓]

為什么要使用input控件？

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