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

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

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

更新時(shí)間:2021年09月27日17時(shí)27分 來源: 瀏覽次數(shù):

好口碑IT培訓(xùn)

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

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

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

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

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

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

 1632734233829_常用屬性.png

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

1632734247561_城市下拉菜單.jpg

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

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

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

1632734267217_日本行政級別.png

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





猜你喜歡:

textarea控件創(chuàng)建文本輸入框

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

aside標(biāo)簽有什么用?【HTML5標(biāo)簽培訓(xùn)】

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

傳智教育前端與移動(dòng)開發(fā)培訓(xùn)

0 分享到:
和我們在線交談!