本文档详细介绍了如何使用 HTML、CSS 和 JavaScript 创建一个动态下拉列表，该列表从 JSON 数据中获取选项，并允许用户搜索和选择项目。重点在于展示如何获取并显示用户从下拉列表中选定的国家/地区。我们将提供完整的代码示例，并解释每个部分的功能，以便你可以轻松地将其集成到你的项目中。
创建 HTML 结构
首先，我们需要创建一个 HTML结构来容纳下拉列表。 这包括一个触发下拉列表的按钮和一个用于显示选项的 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 数组。 然后，它切换下拉列表的可见性。 接下来，它循环遍历国家/地区数组，为每个国家/地区创建一个 元素，并将其添加到下拉列表中。 每个 元素都附加了一个 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 -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属性。
以上就是使用 HTML、CSS 和 JavaScript 显示下拉列表中选定的项目的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579079.html
微信扫一扫 
支付宝扫一扫 
