本文档详细介绍了如何使用 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> 元素，并将它们添加到下拉菜单中。 这种方法允许我们轻松地将事件监听器附加到每个选项。
css javascript java html js json app ssl JavaScript json css html 循环 事件