本文旨在解决在使用多选下拉框时，如何根据用户的选择动态显示或隐藏页面上的特定元素。我们将分析常见问题，并提供修改后的 JavaScript 代码，以确保选中的每个选项都能正确地显示其对应的元素，而不会互相干扰。通过移除不必要的隐藏逻辑，可以实现多选状态下的元素显示。
问题分析
原始代码的问题在于，每次 showDiv() 函数被调用时，它会遍历所有选项，并根据当前选中的值来决定是否显示或隐藏对应的 div 元素。对于多选下拉框，这意味着当选择多个选项时，后一个选项的处理逻辑会覆盖前一个选项的结果，导致只有最后一个选中的选项对应的 div 保持显示。
解决方案
要解决这个问题，需要修改 showDiv() 函数，使其能够处理多个选中的值，并且只负责显示选中的选项对应的 div，而不去隐藏其他 div。关键在于移除 else 语句中的隐藏逻辑。
修改后的 JavaScript 代码
function showDiv() { const selectElement = document.getElementById("select"); const selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value); for (let i = 1; i <= 8; i++) { const divElement = document.getElementById(`hidden_div${i}`); if (selectedValues.includes(String(i))) { divElement.style.display = "block"; } else { divElement.style.display = "none"; // Hide if not selected } }}
代码解释:
立即学习“Java免费学习笔记（深入）”；
获取选中的值:
document.getElementById(“select”) 获取 select 元素。selectElement.selectedOptions 获取所有被选中的 option 元素的集合。Array.from(…).map(option => option.value) 将 selectedOptions 转换为数组，并提取每个 option 的 value 值。
遍历并显示/隐藏对应的 div:
使用 for 循环遍历所有可能的选项值（1 到 8）。document.getElementById(\hidden_div${i}`)获取对应的div` 元素。selectedValues.includes(String(i)) 检查当前选项值是否在选中的值列表中。如果选项值在选中列表中，则显示对应的 div (divElement.style.display = “block”)；否则，隐藏它 (divElement.style.display = “none”)。
HTML 代码 (保持不变)
Every Day Monday Tuesday Wednesday Thursday Friday Saturday Sunday
总结
通过移除 else 条件中的隐藏逻辑，并修改代码以处理选中的多个值，可以正确地显示多选下拉框中每个选定选项对应的元素。修改后的代码更加简洁，易于理解，并且能够满足多选场景下的需求。 这个方法适用于各种需要根据用户选择动态显示/隐藏元素的场景。 确保在实际应用中根据需要调整选项值和对应的 div 元素的数量。
以上就是使用 JavaScript 显示多选下拉框对应的元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582925.html
微信扫一扫 
支付宝扫一扫 
