本教程详细介绍了如何利用javascript实现下拉菜单（select）与页面元素（div）的动态联动显示。当用户选择不同的下拉选项时，相应的div内容会即时展现。同时，文章还涵盖了如何在此基础上，仅对当前可见的输入框进行表单验证，确保用户在提交数据前已填写必要信息，并提供了代码示例及最佳实践建议。
动态联动：下拉菜单控制Div显示
在网页开发中，根据用户的选择动态显示或隐藏页面内容是一种常见的需求。例如，一个下拉菜单可能对应着不同的表单区域或信息展示块。本节将详细讲解如何使用JavaScript实现这一功能。
HTML结构准备
首先，我们需要构建基础的HTML结构，包括一个下拉菜单（select）、多个待切换的div元素，以及一个用于触发验证的保存按钮。为了更好的可维护性和遵循最佳实践，我们建议为div元素使用带有前缀的非数字ID，例如d1、d2等，并初始时将它们设置为隐藏状态（通过hidden属性）。
请选择 选项一 选项二 选项三
在上述HTML中：
select 元素的 id 为 selects。div 容器 boxes 包含了三个子 div，它们的 id 分别是 d1、d2、d3。初始时，这些子 div 都带有 hidden 属性，表示它们默认是不可见的。每个子 div 内部包含一个 input 元素，用于收集用户数据。button 元素的 id 为 btn_save，用于触发后续的验证逻辑。
JavaScript实现联动逻辑
通过监听 select 元素的 change 事件，我们可以根据用户的选择来控制 div 的显示与隐藏。
const divs = document.querySelectorAll("#boxes div"); // 获取所有子divconst selectElement = document.getElementById("selects");selectElement.addEventListener("change", function() { const selectedValue = this.value; // 获取当前选中的值 // 遍历所有子div，根据selectedValue决定其显示或隐藏 divs.forEach(box => { // 如果div的ID与选中值匹配（例如，选中1，则显示d1），则取消隐藏；否则隐藏 box.hidden = box.id !== `d${selectedValue}`; });});
这段JavaScript代码的解释如下：
document.querySelectorAll(“#boxes div”) 选取了 id 为 boxes 的容器内的所有 div 元素，并将它们存储在 divs 常量中。selectElement.addEventListener(“change”, function() { … }) 为 select 元素添加了一个事件监听器。每当 select 的值发生变化时，这个函数就会被执行。this.value 获取当前 select 元素选中的 option 的 value 属性值。divs.forEach(box => { … }) 遍历所有的子 div 元素。box.hidden = box.id !==d${selectedValue}`是核心逻辑。它会检查当前div的id是否与d加上选中的value` 字符串匹配。如果匹配（例如，selectedValue 是 1，box.id 是 d1），则 box.id !==d${selectedValue}`为false，box.hidden被设置为false，div` 就会显示。如果不匹配，则 box.hidden 被设置为 true，div 就会隐藏。
动态表单验证：仅检查当前可见输入框
在用户选择了一个选项并填写了相关数据后，点击保存按钮时，我们通常只需要验证当前可见的输入框。
JavaScript实现验证逻辑
const saveButton = document.getElementById("btn_save");saveButton.addEventListener("click", () => { // 查找当前可见的div const visibleDiv = [...divs].find(div => !div.hidden); // 如果找到了可见的div，并且其内部的input字段为空，则给出提示 if (visibleDiv) { const inputField = visibleDiv.querySelector("input"); if (inputField && inputField.value.trim() === "") { alert("请填写当前可见区域的必填信息！"); inputField.focus(); // 将焦点设置到未填写的输入框 } else { // 可以在这里添加表单提交逻辑 alert("表单验证通过，可以提交！"); console.log(`提交数据：${inputField ? inputField.value : '无'}`); } } else { alert("请先选择一个选项。"); }});
这段JavaScript代码的解释如下：
saveButton.addEventListener(“click”, () => { … }) 为保存按钮添加了一个点击事件监听器。[…divs].find(div => !div.hidden) 是关键。它将 NodeList 类型的 divs 转换为数组，然后使用 find 方法查找第一个 hidden 属性为 false（即可见）的 div 元素。if (visibleDiv) 检查是否找到了可见的 div。visibleDiv.querySelector(“input”) 在可见的 div 内部查找第一个 input 元素。inputField.value.trim() === “” 检查输入框的值是否为空（trim() 用于去除首尾空格）。如果为空，则通过 alert
以上就是JavaScript实现下拉菜单联动Div显示与动态表单验证的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592585.html
微信扫一扫 
支付宝扫一扫 
