本文档详细介绍了如何使用 HTML、CSS 和 JavaScript 创建一个动态下拉列表，该列表从 JSON 数据中获取选项，并允许用户搜索和选择项目。重点在于展示如何获取并显示用户从下拉列表中选定的国家/地区。我们将提供完整的代码示例，并解释每个部分的功能，以便你可以轻松地将其集成到你的项目中。
创建 HTML 结构
首先，我们需要创建一个 HTML结构来容纳下拉列表。 这包括一个触发下拉列表的按钮和一个用于显示选项的 div 元素。
<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>这段代码创建了一个带有按钮的 div 容器，点击该按钮会触发 myFunction() 函数来显示下拉列表。 下拉列表本身是一个 div 元素，其中包含一个用于过滤选项的输入框。
JavaScript 实现动态下拉列表
接下来，我们将使用 JavaScript 从 JSON 数据动态生成下拉列表的选项。
立即学习“Java免费学习笔记（深入）”；
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);
}
}此函数首先定义一个包含国家/地区数据的 JSON 数组。 然后，它切换下拉列表的可见性。 接下来，它循环遍历国家/地区数组，为每个国家/地区创建一个 <a> 元素，并将其添加到下拉列表中。 每个 <a> 元素都附加了一个 click 事件监听器，该监听器调用 countryOnClick 函数。
处理选项选择
countryOnClick 函数负责处理用户选择下拉列表中的选项时发生的事情。
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 函数可以获取当前选中的option，如果需要获取选中的值，可以直接调用该函数。
实现搜索功能
为了增强用户体验，我们添加了一个搜索功能，允许用户通过键入国家/地区名称来过滤下拉列表中的选项。
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 样式
最后，我们将添加一些 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;
}这些样式定义了下拉列表、搜索输入框和选项的外观。 特别是，.selectedOption 类用于突出显示所选选项。
总结
通过结合 HTML、CSS 和 JavaScript，我们创建了一个动态下拉列表，该列表从 JSON 数据中获取选项，并允许用户搜索和选择项目。 此外，我们还实现了显示所选选项的功能。 这种方法可以很容易地适应各种场景，并且可以根据你的特定需求进行定制。
注意事项:
- 确保 JSON 数据的格式正确，并且与 JavaScript 代码中的预期结构匹配。
- 根据你的项目需求调整 CSS 样式以获得所需的外观。
- 考虑添加错误处理，以处理 JSON 数据加载失败或用户交互期间发生的任何其他错误。
- 如果需要将选中的值传递给后端，可以使用 getSelectedOption 函数获取选中的元素，然后获取它的value属性。
