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

<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_save">确认保存</button>

// 获取所有内容 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}`;
  });
});

// 获取保存按钮
const saveButton = document.getElementById("btn_save");

// 监听保存按钮的 'click' 事件
saveButton.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("请先选择一个选项。");
  }
});

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

// 页面加载时，如果 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' 事件，实现输入验证
saveButton.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("请先选择一个选项。");
  }
});