本文旨在指导开发者如何使用 HTML、CSS 和 JavaScript 创建一个动态下拉菜单，并实现选中项的显示功能。我们将详细介绍如何从 JSON 数据动态生成下拉列表，添加搜索功能，并在用户选择某个选项后，将其值显示在页面上。通过本文，你将掌握构建交互式下拉菜单的关键技术。
创建 HTML 结构
首先，我们需要创建基本的 HTML结构来容纳下拉菜单。这包括一个按钮用于触发下拉菜单的显示，一个 div 元素作为下拉菜单的容器，以及一个输入框用于搜索选项。
使用 JavaScript 动态生成下拉列表
接下来，使用 JavaScript 从 JSON 数据动态生成下拉列表。我们创建一个包含国家信息的 JSON 数组，并使用循环遍历该数组，为每个国家创建一个 元素，并将其添加到下拉菜单容器中。
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"); countryOption.setAttribute('value', country[i]['ID']); countryOption.innerText = country[i]['Country_Name']; countryOption.classList.add('dropdown-option'); countryOption.addEventListener('click', countryOnClick); ele.appendChild(countryOption); }}
这段代码首先定义了一个包含国家信息的 JSON 数组 country。然后，它获取 id 为 myDropdown 的元素（即下拉菜单的容器），并切换其 show 类，以显示或隐藏下拉菜单。接下来，它遍历 country 数组，为每个国家创建一个 元素，并设置其 value 属性为国家的 ID，innerText 属性为国家的名称。然后，它为每个 元素添加一个 click 事件监听器，当用户点击某个国家时，将触发 countryOnClick 函数。最后，它将新创建的 元素添加到下拉菜单容器中。
立即学习“Java免费学习笔记（深入）”；
实现搜索功能
为了方便用户查找选项，我们添加一个搜索功能。当用户在输入框中输入内容时，JavaScript 代码会根据输入的内容过滤下拉列表中的选项。
function filterFunction() { var input, filter, div, a, i, txtValue; 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"; } }}
这段代码首先获取输入框的值，并将其转换为大写。然后，它获取下拉菜单容器中的所有 元素。接下来，它遍历这些 元素，并检查它们的文本内容是否包含输入框中的值。如果包含，则显示该 元素；否则，隐藏该 元素。
显示选中项
当用户选择某个选项时，我们需要将其值显示在页面上。这可以通过 JavaScript 代码来实现。当用户点击某个选项时，我们获取该选项的值，并将其显示在指定的元素中。
function countryOnClick(event) { const clickedOption = event.target; const countryID = clickedOption.getAttribute('value'); const countryName = clickedOption.innerText; clickedOption.closest('div').querySelectorAll('.dropdown-option').forEach((o, i) => { o.classList.remove('selectedOption'); }); clickedOption.classList.add('selectedOption'); console.log(`${countryID} - ${countryName}`); console.log(getSelectedOption());}function getSelectedOption() { return document.querySelector('#myDropdown > .dropdown-option.selectedOption');}
这段代码首先获取被点击的 元素，并获取其 value 属性和 innerText 属性，分别表示国家的 ID 和名称。然后，它从下拉菜单容器中移除所有 元素的 selectedOption 类，并将被点击的 元素的 selectedOption 类添加到下拉菜单容器中。接下来，它将国家的 ID 和名称输出到控制台。最后，它调用 getSelectedOption 函数，该函数返回当前选中的 元素。
添加 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;}
这段代码定义了输入框、下拉菜单容器和 元素的样式。它还定义了当鼠标悬停在 元素上时和当 元素被选中时的样式。
总结
通过以上步骤，我们成功创建了一个动态下拉菜单，并实现了选中项的显示功能。这个示例展示了如何使用 HTML、CSS 和 JavaScript 构建交互式 Web 应用程序。开发者可以根据自己的需求修改和扩展这个示例，以创建更复杂和功能更强大的下拉菜单。
注意事项：
确保 JSON 数据格式正确，否则可能导致下拉列表无法正常显示。在处理用户输入时，要进行适当的验证和过滤，以防止安全漏洞。考虑到性能问题，尽量避免在下拉列表中加载过多的选项。如果选项数量很大，可以考虑使用分页或虚拟滚动等技术。
以上就是使用 HTML、CSS 和 JavaScript 显示下拉菜单选中项的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579081.html
微信扫一扫 
支付宝扫一扫 
