教育行業A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

怎樣使用select控件制作下拉菜單效果?

更新時間:2021年09月27日17時27分 來源: 瀏覽次數:

好口碑IT培訓

瀏覽網頁時,經常會看到包含多個選項的下拉菜單如選擇所在的城市、出生年月、興趣愛好等。下按菜單,例Vowo日(Vono,示即為一個下拉菜單,當單擊下拉符號時,會出現一個選擇列表。要想制作這種下拉菜單效果,就需會出用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>標記的常用屬性

 1632734233829_常用屬性.png

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

1632734247561_城市下拉菜單.jpg

要想實現圖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所示,下拉菜單中的選項被清晰地分組了。

1632734267217_日本行政級別.png

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





猜你喜歡:

textarea控件創建文本輸入框

Doctype的作用,H5 為什么只需要寫DOCTYPE HTML?

aside標簽有什么用?【HTML5標簽培訓】

前端HTML使用什么樣的方法繪制圓?

傳智教育前端與移動開發培訓

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载