如何基于多选框选中项用JavaScript控制Modal的显示与隐藏

需求说明 #

• 当用户在openModal1的多选下拉框中选中“Four”选项时，显示openModal2，后续按正常流程推进
• 若未选中“Four”，则隐藏openModal2并直接跳转至openModal3

测试场景 #

• 场景1：选中One、Two、Five（未选Four）→ 隐藏openModal2，直接打开openModal3
• 场景2：选中One、Two、Four → 显示openModal2，点击按钮后进入openModal3

原代码问题分析 #

1. 脚本在页面加载时立即执行，未绑定表单提交事件，无法响应用户选择操作
2. 判断条件错误：下拉框选项“Four”的value是"4"，但代码中判断的是是否包含"Four"
3. 逻辑完全颠倒：选中Four时应该显示openModal2，而非直接显示openModal3
4. 未处理表单提交的默认刷新行为
5. 缺少模态框初始隐藏样式及按钮跳转逻辑

修正后的完整代码 #

<style>
/* 给模态框添加初始隐藏样式 */
.modalDialog {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 20px;
  background: #fff;
}
.close {
  text-decoration: none;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #000;
}
</style>

<div id="openModal1" class="modalDialog" data-modalorder="1" style="display:block;">
   <div>
      <a href="#close" title="Close" class="close">X</a>
      <h1>Select your options</h1>
      <form id="form_intereses">
         <select id="number_selection" name="number_selection" multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
         </select>
         <input class="getAssignment" type="submit" value="Siguiente">
      </form>
   </div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
   <div>
      <a href="#close" title="Close" class="close">X</a>
      <h1 class="estilo_mobile">Title if selected number four</h1>
      <p>If selected "number four" show this content, if not hide this div and skip to the next</p>
      <input class="getAssignment" type="button" value="Siguiente">
   </div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
   <div>
      <a href="#close" title="Close" class="close">X</a>
      <h1 class="estilo_mobile">Title if not selected number four</h1>
      <p>If not selected number four show content</p>
      <input class="getAssignment" type="button" value="Siguiente">
   </div>
</div>

<script>
// 封装模态框显示/隐藏函数
function toggleModal(modalId, show) {
  const modal = document.getElementById(modalId);
  modal.style.display = show ? 'block' : 'none';
}

// 绑定表单提交事件
document.getElementById('form_intereses').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认刷新行为
  
  // 获取选中的选项值
  const selectedOptions = document.getElementById('number_selection').selectedOptions;
  const values = Array.from(selectedOptions).map(opt => opt.value);
  
  // 隐藏第一个模态框
  toggleModal('openModal1', false);
  
  // 判断是否选中Four（value为"4"）
  if (values.includes('4')) {
    // 显示第二个模态框
    toggleModal('openModal2', true);
  } else {
    // 跳过第二个，直接显示第三个模态框
    toggleModal('openModal2', false);
    toggleModal('openModal3', true);
  }
});

// 绑定第二个模态框的按钮点击事件
document.querySelector('#openModal2 .getAssignment').addEventListener('click', function() {
  toggleModal('openModal2', false);
  toggleModal('openModal3', true);
});

// 绑定关闭按钮事件（可选）
document.querySelectorAll('.close').forEach(closeBtn => {
  closeBtn.addEventListener('click', function(e) {
    e.preventDefault();
    this.closest('.modalDialog').style.display = 'none';
  });
});
</script>

关键改动说明 #

1. 添加了模态框的基础样式，确保初始状态为隐藏
2. 封装了toggleModal函数，统一处理模态框的显示/隐藏，避免重复代码
3. 为表单添加submit事件监听，并阻止默认刷新行为
4. 修正判断条件：检查选中值是否包含"4"（对应“Four”选项的value属性）
5. 调整逻辑分支：选中"4"时显示openModal2，否则直接打开openModal3
6. 为openModal2的按钮添加点击事件，实现从openModal2到openModal3的跳转
7. 可选添加关闭按钮的事件处理，优化用户体验

内容的提问来源于stack exchange，提问作者Jose Eduardo Perez