极客教程JavaScript 如何创建一个下拉列表
下面我们将学习如何使用HTML和JavaScript创建一个下拉列表。在开始学习这篇文章之前，让我们先了解下拉列表，以及为什么我们需要使用它。
下拉列表给了用户多个选择，并允许他们从所有选项中选择一个值。然而，我们可以使用多个单选按钮做同样的事情，但如果我们有数百个选择呢？那么我们可以使用下拉菜单。
当用户点击下拉按钮时，它会打开所有的选择，用户可以选择任何人。而且，下拉菜单比单选按钮提供了更好的用户体验。
使用<select>和<option>标签来创建一个下拉列表
HTML的
语法
用户可以按照下面的语法，使用<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代码来获取下拉菜单中的选择值。每当用户选择新的值并调用selectOption()函数时，”onchange “事件将被触发。
此外，我们还为默认的下拉菜单提供了一些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步 --在DIV上添加类名为 “menu-dropdwon “的onclick事件。同时，当用户点击该div时，调用openDropdown()函数。
第6步 --在openDropdown()函数中，访问类名为’dropdown-list’的div元素，如果它是隐藏的，则显示，如果它是可见的，则使用display属性将其隐藏。
第7步 - 现在，使用JavaScript给每个<p>标签添加一个点击事件，为此，使用for a loop。
第8步 - 在事件监听器的回调函数中，在输出中显示被点击元素的内部HTML，并通过改变显示为无来隐藏下拉菜单。
例子
在下面的例子中，我们按照上面的步骤从头开始创建一个下拉菜单。在输出中，用户可以观察到，当他们点击下拉菜单的标题时，它会打开，当他们再次点击时，它会关闭。另外，当他们点击任何一个选项时，它会选择该选项并将其显示出来。
<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。