App下載

在html網(wǎng)頁(yè)中如何做個(gè)下拉列表？下拉列表的方法有哪幾種？

猿友 2021-06-01 14:54:13 瀏覽數(shù) (12347)
反饋

在我們是html學(xué)習(xí)中，我們會(huì)遇到各種不同的標(biāo)簽，那么今天我們就來(lái)說(shuō)說(shuō)“在html網(wǎng)頁(yè)中如何做個(gè)下拉列表”吧！以下是小編整理的一個(gè)方法。

1.首先我們?cè)陂_(kāi)發(fā)工具中新建一個(gè)新的文件，加入 div 標(biāo)簽聲明一個(gè)類選擇器設(shè)置寬高背景顏色，在添加 form 標(biāo)簽，在標(biāo)簽中加入我們需要的一個(gè) select 標(biāo)簽，代碼和運(yùn)行截圖如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>下拉框設(shè)置</title>
	</head>
	<body>
		<div class="D-drop-f-box">
			<form>
				<select>
					<option>食物</option>
					<option>甜食</option>
					<option>奶茶</option>
					<option>西餐</option>
					<option>快餐</option>
				</select>
				</form>
		</div>
	</body>
</html>

下拉

在圖中我們看到了下拉框顯示的一個(gè)內(nèi)容。

2.那么在默認(rèn)中的話，下拉框中是默認(rèn)選擇食物為第一選項(xiàng)，如果要修改選項(xiàng)的話，我們只需要在標(biāo)簽 ?option? 中加入 ?selected="selected"?就可以了，代碼截圖如下：

	<div class="D-drop-f-box">
			<form>
				<select>
					<option>食物</option>
					<option>甜食</option>
					<option>奶茶</option>
					<option>西餐</option>
					<option selected="selected">快餐</option>
				</select>
				</form>
			</form>
		</div>

下拉更換默認(rèn)

在圖中我們可以就可以看到我們已經(jīng)將之前的默認(rèn)食物改為了快餐。

總結(jié)：

以上就是一個(gè)有關(guān)于"在html網(wǎng)頁(yè)中如何做個(gè)下拉列表"的介紹，其實(shí)在 select 標(biāo)簽中還有很多的屬性標(biāo)簽可以使用，我們可以在HTML DOM Select 對(duì)象進(jìn)行學(xué)習(xí)和了解。如果你有更好的方法的話可以分享給大家噢！


HTML CSS 前端

0 人點(diǎn)贊