使用J*aScript实现Select联动Div显示与输入验证_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用J*aScript实现Select联动Div显示与输入验证

2025-11-05

浏览次数：次

返回列表

使用JavaScript实现Select联动Div显示与输入验证

本教程详细阐述了如何利用j*ascript实现网页中下拉选择框（`select`）与多个内容区域（`div`）的动态联动显示。当用户选择不同的选项时，对应的`div`内容将实时显示，同时隐藏其他`div`。此外，教程还涵盖了如何在一个保存按钮被点击时，对当前可见`div`内的输入字段进行非空验证，并提供了最佳实践建议，如避免纯数字id和使用标准事件监听器，以构建更健壮、用户友好的交互界面。

在现代前端开发中，根据用户的选择动态调整页面内容是一种常见的交互需求。例如，根据下拉菜单的选择显示不同的表单字段或信息区域。本教程将指导您如何使用纯J*aScript实现这一功能，包括select元素与div元素的联动显示，以及对当前可见div内输入字段的非空验证。

1. HTML结构准备

首先，我们需要构建基础的HTML结构。这包括一个select下拉菜单、多个作为内容容器的div元素，以及一个用于触发验证的按钮。为了遵循最佳实践，我们对原始问题中的ID命名进行了一些优化：

避免纯数字ID：将div的ID从1, 2, 3改为d1, d2, d3。纯数字ID在CSS选择器和某些J*aScript操作中可能引起混淆或不便。
初始隐藏div：为所有内容div添加hidden属性，确保页面加载时它们默认是不可见的。
添加默认选项：在select中添加一个默认的“请选择”选项，其value为空，引导用户进行选择。

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

<!-- 内容 DIVs -->
<div id="boxes">
  <div id="d1" hidden>
    <p>这是选项一的内容。</p>
    <p><input id="user1" placeholder="请输入用户1信息"></p>
  </div>
  <div id="d2" hidden>
    <p>这是选项二的内容。</p>
    <input id="user2" placeholder="请输入用户2信息">
  </div>
  <div id="d3" hidden>
    <p>这是选项三的内容。</p>
    <input id="user3" placeholder="请输入用户3信息">
  </div>
</div>
<button type="button" id="btn_s*e">确认保存</button>

2. J*aScript实现Select与Div的联动显示

接下来，我们将使用J*aScript来监听select元素的变化，并根据其选中的值来控制对应div的显示与隐藏。

动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联J*aScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR*函数库的强大功能，对常用的、强大的包

525 查看详情动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版

// 获取所有内容 div 元素
const divs = document.querySelectorAll("#boxes div");
// 获取 select 元素
const selects = document.getElementById("selects");

// 监听 select 元素的 'change' 事件
selects.addEventListener("change", function() {
  const selectedValue = this.value; // 获取当前选中的值

  // 遍历所有 div，根据 selectedValue 控制其显示/隐藏
  divs.forEach(box => {
    // 如果 div 的 ID 与 selectedValue 匹配（例如 'd1' 对 '1'），则显示，否则隐藏
    box.hidden = box.id !== `d${selectedValue}`;
  });
});

代码解析：

document.querySelectorAll("#boxes div")：选择id为boxes的div容器下的所有子div元素。
selects.addEventListener("change", function() { ... })：为select元素添加一个事件监听器，当其值发生改变时触发回调函数。
this.value：在事件回调中，this指向触发事件的元素，即select，this.value获取当前选中的option的value属性值。
divs.forEach(box => { ... })：遍历所有获取到的div元素。
box.hidden = box.id !== \d${selectedValue}``：这是实现显示/隐藏的关键。
- box.id是当前div的ID（例如d1）。
- d${selectedValue} 动态构建目标ID（例如，如果selectedValue是1，则为d1）。
- 如果box.id与目标ID不相等，则box.hidden被设置为true（隐藏）；如果相等，则设置为false（显示）。

3. J*aScript实现输入字段的非空验证

现在，我们将添加功能，当用户点击“确认保存”按钮时，检查当前可见div中的输入字段是否已填写。

// 获取保存按钮
const s*eButton = document.getElementById("btn_s*e");

// 监听保存按钮的 'click' 事件
s*eButton.addEventListener("click", () => {
  // 找到当前可见的 div 元素
  // 使用 spread 运算符将 NodeList 转换为数组，以便使用 find 方法
  const visibleDiv = [...divs].find(div => !div.hidden);

  // 如果找到了可见的 div 并且其中包含输入框
  if (visibleDiv) {
    const inputField = visibleDiv.querySelector("input");
    // 检查输入框的值是否为空或只包含空格
    if (inputField && inputField.value.trim() === "") {
      alert("请填写当前可见区域的输入字段！");
      inputField.focus(); // 将焦点设置到未填写的输入框
    } else {
      // 可以在这里执行保存数据的逻辑
      alert("数据已验证，可以执行保存操作。");
      console.log(`用户输入：${inputField ? inputField.value : '无输入'}`);
    }
  } else {
    alert("请先选择一个选项。");
  }
});

代码解析：

s*eButton.addEventListener("click", () => { ... })：为保存按钮添加点击事件监听器。
[...divs].find(div => !div.hidden)：
- [...divs]将NodeList（由querySelectorAll返回）转换为一个真正的数组，这样我们就可以使用数组的find方法。
- find方法遍历数组，返回第一个满足条件的元素。这里的条件是!div.hidden，即div的hidden属性为false（可见）。
visibleDiv.querySelector("input")：在找到的可见div内部查找第一个input元素。
inputField.value.trim() === ""：获取输入框的值，并使用trim()方法去除字符串两端的空白字符，然后检查其是否为空。
alert()：用于向用户显示简单的提示信息。在实际应用中，通常会使用更友好的UI提示方式（如在输入框下方显示错误信息）。
inputField.focus()：将浏览器的焦点移动到未填写的输入框，方便用户直接输入。

4. 完整J*aScript代码

将上述两部分J*aScript代码合并，形成完整的脚本：

// 获取所有内容 div 元素
const divs = document.querySelectorAll("#boxes div");
// 获取 select 元素
const selects = document.getElementById("selects");
// 获取保存按钮
const s*eButton = document.getElementById("btn_s*e");

// 页面加载时，如果 select 有默认值，可以触发一次 change 事件来显示初始 div
// 或者确保所有 div 初始都是隐藏的，并且 select 的默认选项是“请选择”
// selects.dispatchEvent(new Event('change')); // 如果需要初始显示某个div

// 监听 select 元素的 'change' 事件，实现 div 联动显示
selects.addEventListener("change", function() {
  const selectedValue = this.value; // 获取当前选中的值

  divs.forEach(box => {
    box.hidden = box.id !== `d${selectedValue}`;
  });
});

// 监听保存按钮的 'click' 事件，实现输入验证
s*eButton.addEventListener("click", () => {
  const visibleDiv = [...divs].find(div => !div.hidden);

  if (visibleDiv) {
    const inputField = visibleDiv.querySelector("input");
    if (inputField && inputField.value.trim() === "") {
      alert("请填写当前可见区域的输入字段！");
      inputField.focus();
    } else {
      alert("数据已验证，可以执行保存操作。");
      console.log(`用户输入：${inputField ? inputField.value : '无输入'}`);
      // 实际应用中，此处应包含数据提交逻辑
    }
  } else {
    alert("请先选择一个选项。");
  }
});

5. 注意事项与最佳实践

ID 命名规范：如前所述，避免使用纯数字作为HTML元素的ID。推荐使用字母开头，或结合数字和字母（如d1、user1）。
hidden 属性：hidden是一个HTML5属性，通过CSS display: none !important; 来控制元素的可见性。它比直接操作style.display更语义化。
用户反馈：本教程使用alert()进行简单提示。在实际项目中，应提供更友好的用户体验，例如在输入框下方显示错误信息、高亮显示未通过验证的字段，或使用模态框。
事件委托：如果页面中存在大量动态添加或移除的元素，并且需要对它们进行事件监听，可以考虑使用事件委托（将事件监听器添加到它们的共同父元素上），以提高性能和代码的简洁性。但对于本例这种固定数量的div，直接监听是可行的。
表单提交：如果您的按钮位于
标签内，并且type="submit"，点击按钮可能会触发表单的默认提交行为。在这种情况下，您需要在事件处理函数中使用event.preventDefault()来阻止默认行为。本教程中使用type="button"，因此不会触发默认提交。
初始状态：确保页面加载时的初始状态是正确的。例如，所有内容div默认隐藏，select有一个引导用户选择的默认选项。

总结

通过本教程，您已经掌握了如何使用J*aScript实现select下拉菜单与div内容的动态联动显示，并对当前可见区域的输入字段进行非空验证。这些技术是构建交互式和响应式前端界面的基础，遵循最佳实践可以帮助您编写出更健壮、易于维护的代码。在实际开发中，您可以根据具体需求扩展这些功能，例如添加更复杂的验证规则、异步数据加载或更丰富的用户界面反馈。

以上就是使用J*aScript实现Select联动Div显示与输入验证的详细内容，更多请关注其它相关文章！

# 所有内容 # 沧州网站建设大概费用 # 宝鸡SEO鱼刺系统排名 # 网络全网营销推广 # 网站建设做的好 # 小白学seo要多久 # 物业垂直网站推广策划 # 品牌营销推广杏云速捷棒 # 推广营销文案模板怎么写 # 清远水产业网站推广 # 优化网站有哪几种方法呢 # 加载 # 表单 # 请选择 # 请输入 # 遍历 # css # 置顶 # 回调 # 输入框 # 这是 # css选择器 # 前端开发 # 回调函数 # 浏览器 # html5 # node # 前端 # html # java # javascript