本文档详细介绍了如何使用 HTML、CSS 和 JavaScript 创建一个动态下拉列表，该列表从 JSON 数据源获取选项，并允许用户搜索和选择项目。我们将重点介绍如何正确地将事件处理程序附加到下拉列表选项，以便在选择项目时能够捕获并显示其值。此外，还将介绍如何使用 CSS 来增强下拉列表的样式和用户体验。
创建动态下拉列表
首先，我们需要一个 HTML 结构来容纳下拉列表。 这包括一个触发下拉菜单的按钮和一个用于显示选项的容器。
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()">
</div>
</div>接下来，使用 JavaScript 从 JSON 数据动态填充下拉列表。关键在于使用 document.createElement() 创建新的 <a> 元素，并将它们添加到下拉菜单中。 这种方法允许我们轻松地将事件监听器附加到每个选项。
function myFunction() {
var country = [
{ "ID": "001", "Country_Name": "India" },
{ "ID": "002", "Country_Name": "Australia" },
{ "ID": "003", "Country_Name": "Austria" },
{ "ID": "004", "Country_Name": "China" },
{ "ID": "005", "Country_Name": "Bangladesh" }
];
document.getElementById("myDropdown").classList.toggle("show");
var ele = document.getElementById("myDropdown");
// 循环遍历国家/地区数组
for (var i = 0; i < country.length; i++) {
// 创建一个锚元素
const countryOption = document.createElement("a");
// 将国家/地区 ID 保存在其 value 属性中
countryOption.setAttribute('value', country[i]['ID']);
// 将国家/地区名称作为其 innerText
countryOption.innerText = country[i]['Country_Name'];
// 将类 dropdown-option 添加到选项元素
countryOption.classList.add('dropdown-option');
// 将 countryOnClick 函数（在下面定义）绑定为单击事件处理程序
countryOption.addEventListener('click', countryOnClick);
// 将新锚点附加到下拉元素
ele.appendChild(countryOption);
}
}处理选项选择
现在，我们需要一个函数来处理选择下拉列表中的选项。此函数应检索所选选项的值并执行所需的操作，例如在控制台中显示该值或更新页面上的其他元素。
立即学习“Java免费学习笔记（深入）”；
// 下拉选项的单击事件处理程序
function countryOnClick(event) {
// 从触发事件的元素中获取国家/地区属性
const clickedOption = event.target;
const countryID = clickedOption.getAttribute('value');
const countryName = clickedOption.innerText;
// 从下拉菜单中的每个选项中删除 selectedOption 类
clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o, i) => {
o.classList.remove('selectedOption');
});
// 将 selectedOption 类添加到选定的选项元素
clickedOption.classList.add('selectedOption');
// 在控制台中显示这些数据
console.log(`${countryID} - ${countryName}`);
console.log(getSelectedOption());
}
function getSelectedOption() {
return document.querySelector('#myDropdown > .dropdown-option.selectedOption');
}此代码首先获取所单击的选项的 ID 和名称。 然后，它从所有其他选项中删除 selectedOption 类，并将该类添加到所单击的选项。 最后，它将 ID 和名称记录到控制台。 getSelectedOption 函数可用于获取当前选定的选项。
添加搜索功能
为了增强用户体验，我们可以添加一个搜索功能来过滤下拉列表中的选项。 这可以使用 onkeyup 事件处理程序和一些 JavaScript 来完成。
// 当过滤器输入更改时调用，它会过滤下拉选项列表
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}此代码获取搜索输入的值并将其转换为大写。 然后，它循环遍历下拉列表中的所有选项，并显示与搜索输入匹配的选项。
样式化下拉列表
最后，我们可以使用 CSS 来样式化下拉列表以使其更具视觉吸引力。
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {
outline: 3px solid #ddd;
}
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.show {
display: block;
}
.dropdown-content > .dropdown-option{
cursor: pointer;
}
.dropdown-content > .selectedOption{
background-color: darkgray !important;
}此 CSS 代码设置搜索输入和下拉列表本身的样式。 它还添加了一个悬停效果，并在选择选项时更改背景颜色。
总结
通过遵循这些步骤，您可以创建一个动态下拉列表，该列表从 JSON 数据源获取选项，并允许用户搜索和选择项目。 关键在于使用 document.createElement() 创建新的 <a> 元素，并将它们添加到下拉菜单中。 这种方法允许我们轻松地将事件监听器附加到每个选项。
