HTML 中的下拉列表-html教程-PHP中文网

HTML 中的下拉列表是构建表单或显示选择列表的重要元素，用户可以从中选择一个或多个值。 HTML 中的这种选择列表称为下拉列表。它是使用

HTML 中下拉列表的语法

让我们看看如何创建下拉列表：

语法：

<select>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option3</option>
</select>

登录后复制

示例：

<select name="color">
<option value="red">Red</option>
<option value="purple">Purple </option>
</select>

登录后复制

如上面的语法所示，是用于创建下拉列表的标签。

使用代码设置背景颜色或悬停颜色：

.dropdown a:hover{
Background-color: color_name;
}

登录后复制

下拉列表的位置定义为两个值：位置：用于在选择列表按钮正下方显示列表内容的相对值。借助位置：绝对；

Min-width 是用于为下拉列表指定特定宽度的属性之一。我们可以通过将宽度设置为100%来将其设置为与我们的下拉按钮一样长。上述语法是针对单个属性选择而定义的；现在，我们将看到如何从项目列表中选择多个选项。

语法：

<select multiple>
<option value="">option1</option>
<option value="">option2</option>
</select>

登录后复制

示例：

<select name="subject" multiple>
<option value="math">Math</option>
<option value="english">English</option>
<option value="science">Science</option>
<option value="biology">Biology</option>
</select>

登录后复制

下拉列表在 HTML 中如何工作？

现在学习语法后，我们将了解下拉列表在 HTML 中到底如何工作。

名称：此属性有助于为控件分配名称，该名称将发送到服务器进行识别并获取所需的值。
Multiple：如果属性设置为“multiple”，则用户可以从选择列表中选择多个值。
Size： size 属性用于定义下拉列表周围特定大小的滚动框。它对于显示列表中的几个可见选项也很有帮助。
值：此属性将显示选择列表中的一个选项被选中。
选定的属性在页面加载的最开始点启用，以显示列表中已选择的列表项。
标签：标签属性是标记选项值的另一种方法。
禁用：如果我们想显示带有禁用选项的下拉列表，可以在 HTML 选择列表中使用禁用属性。
onChange：每当用户要从下拉列表中选择任何选项时，都会在选择项目时触发该事件。
onFocus：每当用户将鼠标悬停在选择列表上以从列表中选择一个选项时，都会触发一个事件来选择该项目。
表单：该属性用于定义与选择字段相关的一个或多个表单。
禁用：我们应该借助此属性来保持下拉列表对用户禁用。
required：每当填写某些表单时，我们希望表明在实际发送表单之前，需要此字段从其列表中选择任何值，因此在这种情况下，我们定义用户需要从列表中选择任意一个值。

HTML 代码示例

以下示例将展示下拉列表的具体使用方式：

示例#1

代码：

<head>
<title>DropDown List</title>
</head>
<body>
<h4>Seven Wonders of the world</h4>
<form>
<select name = "dropdown">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
</form>
</body>

登录后复制

上面的示例包含不同的选项，如禁用、选定、必需等，这些选项显示在输出屏幕中。

输出：

HTML 中的下拉列表

示例#2

代码：

<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>

登录后复制

如下图所示，从下拉列表中选择多个选项，按给定按钮并按 CTRL 键选择多个选项。

输出：

HTML 中的下拉列表

示例 #3

代码：

<!DOCTYPE html>
<html>
<head>
<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>
</head>
<body>
<h2>Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>
</body>
</html>

登录后复制

下拉列表将在悬停效果上打开。

输出：

HTML 中的下拉列表