JavaScript教程-如何使用JavaScript创建下拉列表?
在开始创建下拉列表之前,了解一下什么是下拉列表很重要。下拉列表是一个可切换的菜单,允许用户从多个选项中选择一个选项。此列表中的选项在代码中定义,并与一个函数相关联。当您点击或选择此选项时,该函数会触发并开始执行。
您在大多数情况下都会在注册表单上看到下拉列表,以从下拉菜单中选择状态或城市。下拉列表允许我们仅从项目列表中选择一个。以下是下拉列表的外观示例:
创建下拉列表的重要点
- 使用
<select>
标签与<option>
标签一起在HTML中创建简单的下拉列表。之后,JavaScript将帮助执行此列表的操作。 - 除此之外,您还可以使用容器标签
<div>
来创建下拉列表。在其中添加下拉项和链接。我们将在本章中的示例中讨论每种方法。 - 您可以使用任何元素,如
<button>
、<a>
或<p>
来打开下拉菜单。
请看下面的示例,了解如何使用不同的方法创建下拉列表。
示例
使用<select>
标签创建简单的下拉列表
此示例演示如何在HTML和JavaScript中使用<select>
标签创建简单的下拉列表。当选择选项时,相应的值将显示在文本字段中。
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单示例</title>
</head>
<body>
<form>
<b>使用下拉列表选择您喜欢的教程网站:</b>
<select id="myList" onchange="favTutorial()">
<option>--- 选择教程 ---</option>
<option value="w3schools">w3schools</option>
<option value="javatiku">Javatiku</option>
<option value="tutorialsiku">tutorialsiku</option>
<option value="geeksforgeeks">geeksforgeeks</option>
</select>
<p>您选择的教程网站是:
<input type="text" id="favourite" size="20">
</p>
</form>
<script>
function favTutorial() {
var mylist = document.getElementById("myList");
document.getElementById("favourite").value = mylist.options[mylist.selectedIndex].text;
}
</script>
</body>
</html>
使用按钮和<div>
标签创建下拉列表
此示例使用按钮创建下拉列表。单击按钮时,显示项目列表。
<!DOCTYPE html>
<html>
<head>
<title>下拉菜单示例</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.button {
padding: 10px 30px;
font-size: 15px;
}
#list-items {
display: none;
position: absolute;
background-color: white;
min-width: 185px;
}
#list-items a {
display: block;
font-size: 18px;
background-color: #ddd;
color: black;
text-decoration: none;
padding: 10px;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="button" onclick="showHideDropdown()">选择语言</button>
<div id="list-items">
<a href="#">中文</a>
<a href="#">英文</a>
<a href="#">西班牙文</a>
<a href="#">法文</a>
<a href="#">日文</a>
</div>
</div>
<script>
function showHideDropdown() {
var listItems = document.getElementById("list-items");
listItems.style.display = (listItems.style.display === "none") ? "block" : "none";
}
</script>
</body>
</html>
多个下拉列表示例
此示例演示如何创建一个带有多个下拉菜单的表单,这些下拉菜单被归类为各种技术科目。单击下拉按钮时,显示相应的下拉列表。
<!DOCTYPE html>
<html>
<head>
<title>多个下拉菜单示例</title>
<style>
/* 下拉菜单的样式 */
.dropbtn {
background-color: green;
color: white;
padding: 14px;
font-size: 16px;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 单击时显示下拉菜单 */
.show {
display: block;
}
</style>
</head>
<body>
<h2>教程列表使用下拉菜单</h2>
<p>单击按钮以打开教程下拉菜单。</p>
<div class="dropdown">
<button onclick="showHideDropdown('myDropdown1')" class="dropbtn">编程</button>
<div id="myDropdown1" class="dropdown-content">
<a href="#">Java</a>
<a href="#">Python</a>
<a href="#">C++</a>
<a href="#">C</a>
</div>
</div>
<div class="dropdown">
<button onclick="showHideDropdown('myDropdown2')" class="dropbtn">数据库</button>
<div id="myDropdown2" class="dropdown-content">
<a href="#">MySQL</a>
<a href="#">MongoDB</a>
<a href="#">Cassandra</a>
</div>
</div>
<div class="dropdown">
<button onclick="showHideDropdown('myDropdown3')" class="dropbtn">Web技术</button>
<div id="myDropdown3" class="dropdown-content">
<a href="#">PHP</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</div>
</div>
<script>
function showHideDropdown(dropdownId) {
var dropdownContent = document.getElementById(dropdownId);
dropdownContent.classList.toggle("show");
}
// 如果用户在外部单击,关闭下拉菜单
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
};
</script>
</body>
</html>
这些示例涵盖了使用HTML、CSS和JavaScript创建下拉列表的不同方法。