JavaScript实现下拉菜单联动Div显示与动态表单验证

本教程详细介绍了如何利用javascript实现下拉菜单（select）与页面元素（div）的动态联动显示。当用户选择不同的下拉选项时，相应的div内容会即时展现。同时，文章还涵盖了如何在此基础上，仅对当前可见的输入框进行表单验证，确保用户在提交数据前已填写必要信息，并提供了代码示例及最佳实践建议。

动态联动：下拉菜单控制Div显示

在网页开发中，根据用户的选择动态显示或隐藏页面内容是一种常见的需求。例如，一个下拉菜单可能对应着不同的表单区域或信息展示块。本节将详细讲解如何使用JavaScript实现这一功能。

HTML结构准备

首先，我们需要构建基础的HTML结构，包括一个下拉菜单（select）、多个待切换的div元素，以及一个用于触发验证的保存按钮。为了更好的可维护性和遵循最佳实践，我们建议为div元素使用带有前缀的非数字ID，例如d1、d2等，并初始时将它们设置为隐藏状态（通过hidden属性）。

<select id="selects">
  <option selected value="">请选择</option>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
</select>

<div id="boxes">
  <div id="d1" hidden>
    <p>这是选项一的内容。</p>
    <p><input id="user1" placeholder="请输入用户一数据"></p>
  </div>
  <div id="d2" hidden>
    <p>这是选项二的内容。</p>
    <input id="user2" placeholder="请输入用户二数据">
  </div>
  <div id="d3" hidden>
    <p>这是选项三的内容。</p>
    <input id="user3" placeholder="请输入用户三数据">
  </div>
</div>
<button type="button" id="btn_save">确认提交</button>

在上述HTML中：

• select 元素的 id 为 selects。
• div 容器 boxes 包含了三个子 div，它们的 id 分别是 d1、d2、d3。初始时，这些子 div 都带有 hidden 属性，表示它们默认是不可见的。
• 每个子 div 内部包含一个 input 元素，用于收集用户数据。
• button 元素的 id 为 btn_save，用于触发后续的验证逻辑。

JavaScript实现联动逻辑

通过监听 select 元素的 change 事件，我们可以根据用户的选择来控制 div 的显示与隐藏。

立即学习“Java免费学习笔记（深入）”；

遨虾

1688推出的跨境电商AI智能体

69

查看详情

const divs = document.querySelectorAll("#boxes div"); // 获取所有子div
const 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代码的解释如下：

1. document.querySelectorAll("#boxes div") 选取了 id 为 boxes 的容器内的所有 div 元素，并将它们存储在 divs 常量中。
2. selectElement.addEventListener("change", function() { ... }) 为 select 元素添加了一个事件监听器。每当 select 的值发生变化时，这个函数就会被执行。
3. this.value 获取当前 select 元素选中的 option 的 value 属性值。
4. divs.forEach(box => { ... }) 遍历所有的子 div 元素。
5. 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代码的解释如下：

1. saveButton.addEventListener("click", () => { ... }) 为保存按钮添加了一个点击事件监听器。
2. [...divs].find(div => !div.hidden) 是关键。它将 NodeList 类型的 divs 转换为数组，然后使用 find 方法查找第一个 hidden 属性为 false（即可见）的 div 元素。
3. if (visibleDiv) 检查是否找到了可见的 div。
4. visibleDiv.querySelector("input") 在可见的 div 内部查找第一个 input 元素。
5. inputField.value.trim() === "" 检查输入框的值是否为空（trim() 用于去除首尾空格）。
6. 如果为空，则通过 alert

以上就是JavaScript实现下拉菜单联动Div显示与动态表单验证的详细内容，更多请关注php中文网其它相关文章！