数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
服装研究
法律研究如何使用JavaScript创建下拉列表？
下面我们将学习如何使用HTML和JavaScript创建一个下拉列表。在开始本文之前，让我们了解一下下拉列表以及为什么需要使用它。
下拉列表为用户提供了多个选择，并允许他们从所有选项中选择一个值。但是，我们可以使用多个单选按钮来做同样的事情，但是如果我们有数百个选择呢？然后我们可以使用下拉菜单。
当用户点击下拉按钮时，它会打开所有选择，用户可以选择任何一个。此外，下拉菜单比单选按钮提供更好的用户体验。
使用<select>和<option>标签创建下拉列表
HTML的<select>标签允许我们创建一个下拉列表。我们可以使用<select>标签向下拉列表添加选项。
语法
用户可以按照以下语法使用<select>和<option> HTML标签创建一个下拉菜单。
<select id = "dropdown" onchange = "selectOption()">
// add options here
</select>
<script>
function selectOption() {
let selectedValue = dropdown.options[dropdown.selectedIndex].text;
}
</script>
在上面的语法中，我们使用<script>标签的selectedIndex属性获取所选选项的索引，并根据索引获取选项的详细信息。
示例
在下面的示例中，我们为汽车品牌创建了下拉菜单。此外，我们还编写了JavaScript代码来从下拉菜单中获取选定的值。“onchange”事件将在用户选择新值并调用selectOption()函数时触发。
此外，我们还为默认的下拉菜单提供了一些CSS样式。此外，我们还隐藏了下拉菜单的箭头以改进它。在CSS中，用户可以看到他们如何自定义默认的下拉菜单。
<html>
<head>
<body>
<h2>Using the <i> select and option HTML tag </i> to create a dropdown list in JavaScript</h2>
<h3>Choose any car from below dropdown list.</h3>
<select id = "dropdown" onchange = "selectOption()">
<option>BMW</option>
<option>Range Rover</option>
<option>Mercedes</option>
<option>Honda city</option>
<option>Verna</option>
<option>Tata Safari</option>
</select>
<br><br>
<div id = "output">The selected value is BMW.</div>
<script>
let output = document.getElementById('output');
function selectOption() {
let dropdown = document.getElementById('dropdown');
// get the index of the selected option
let selectedIndex = dropdown.selectedIndex;
// get a selected option and text value using the text property
let selectedValue = dropdown.options[selectedIndex].text;
output.innerHTML = "The selected value is " + selectedValue;
}
</script>
</body>
</html>
使用<div> HTML标签创建下拉列表
我们可以使用普通的HTML、CSS和JavaScript从头开始创建一个下拉菜单。我们可以使用HTML制作下拉菜单，使用CSS对其进行适当的样式设置，并使用JavaScript添加行为。
步骤
用户可以按照以下步骤使用HTML、CSS和JavaScript创建一个下拉菜单。
步骤1 - 创建一个用于下拉标题的div元素，并使用CSS对其进行样式设置。我们创建了带有“menu-dropdwon”类的div元素。
步骤2 - 创建一个带有“dropdown-list”类的div元素以添加下拉选项。
步骤3 - 为带有“dropdown-list”类的div设置样式，并在<p>标签格式中添加选项。还要设置div的<p>HTML元素的样式。
步骤4 - 现在，使用JavaScript为我们的下拉菜单添加行为。
步骤5 - 在带有类名“menu-dropdwon”的div上添加onclick事件。当用户点击div时，还要调用openDropdown()函数。
步骤6 - 在openDropdown()函数中，访问带有类名“dropdown-list”的div元素，并使用display属性显示它（如果它是隐藏的）或隐藏它（如果它是可见的）。
步骤7 - 现在，使用JavaScript为每个<p>标签添加点击事件，为此，使用for循环。
步骤8 - 在事件监听器的回调函数内，显示单击元素的innerHTML，并通过将display更改为none来隐藏下拉菜单。
示例
在下面的示例中，我们按照上述步骤从头开始创建了一个下拉菜单。在输出中，用户可以观察到，当他们点击下拉标题时，它会打开，当他们再次点击时，它会关闭。此外，当他们点击任何选项时，它会选择该选项并在显示器上呈现。
<html>
<head>
<style>
.menu-dropdown {
width: 10rem;
height: 1.8rem;
font-size: 1.5rem;
background-color: aqua;
color: black;
border: 2px solid yellow;
border-radius: 10px;
padding: 2px 5px;
text-align: center;
justify-content: center;
cursor: pointer;
}
.dropdown-list {
display: none;
z-index: 10;
background-color: green;
color: pink;
font-size: 1.2rem;
width: 10.5rem;
border-radius: 10px;
margin-top: 0rem;
cursor: pointer;
}
.dropdown-list p {
padding: 3px 10px;
}
.dropdown-list p:hover {
background-color: blue;
}
</style>
</head>
<body>
<h2>
Using the <i> div and p tag </i> to create a dropdown list in JavaScript.
</h2>
<h3>Choose any value from below dropdown list.</h3>
<div id = "output">The selected value is none</div>
<br>
<!-- whenever we select the value, it will invoke the selectOption() function -->
<div class = "menu-dropdown" onclick = "openDropdown()">
Choose Value
</div>
<div class = "dropdown-list" id = "list">
<p>First option</p>
<p>Second option</p>
<p>Third option</p>
<p>Fourth option</p>
<p>Fifth option</p>
<p>Sixth option</p>
<p>Seventh option</p>
</div>
<script>
let output = document.getElementById('output');
let dropdownList = document.getElementById("list");
dropdownList.style.display = "none";
function openDropdown() {
if (dropdownList.style.display != "none") {
dropdownList.style.display = "none";
} else {
dropdownList.style.display = "block";
}
}
const p_elements = document.getElementsByTagName("p");
// access all p elements
const totalP = p_elements.length;
// iterate through all <p> elements
for (let i = 0; i < totalP; i++) {
const option = p_elements[i];
// add event listner to <p> element
option.addEventListener("click", () => {
// When a user clicks on any p element, get its innerHTML
output.innerHTML = "The selected option is " + option.innerHTML;
// close the dropdown list once users select an option
dropdownList.style.display = "none";
})
}
</script>
</body>
</html>
用户学习了两种不同的创建下拉菜单的方法。一种使用<select>和<option>标签，这是HTML中的默认选择菜单；另一种只使用HTML、CSS和JavaScript。
13K+ 次浏览
