Spring Boot+Thymeleaf：根据下拉选项控制模态框调用

针对你的Spring Boot + Thymeleaf开发场景，这里提供两种实用的JavaScript实现方案，核心逻辑是当下拉框.classOverridden有选中项时，阻止#managerSelectForCooridnator模态框显示：

方案1：监听模态框显示前事件（推荐，适配Bootstrap模态框） #

如果你的模态框是基于Bootstrap实现的，利用它的show.bs.modal事件（模态框即将显示时触发）来做判断，能精准拦截：

document.addEventListener('DOMContentLoaded', function() {
  // 获取模态框元素
  const modal = document.getElementById('managerSelectForCooridnator');
  
  // 监听模态框显示前的事件
  modal.addEventListener('show.bs.modal', function(e) {
    // 获取目标下拉框
    const selectEl = document.querySelector('.classOverridden');
    
    // 判断下拉框是否选中了有效选项（根据你的实际情况调整判断条件）
    // 示例1：判断选中值非空（假设默认选项value为空）
    if (selectEl.value && selectEl.value.trim() !== '') {
      e.preventDefault(); // 阻止模态框显示
    }
    
    // 示例2：判断选中索引不是第一个（默认选项是第一个）
    // if (selectEl.selectedIndex > 0) {
    //   e.preventDefault();
    // }
  });
});

方案2：监听触发按钮的点击事件 #

如果模态框是通过按钮点击触发的，也可以直接在按钮的点击事件中判断并拦截：

document.addEventListener('DOMContentLoaded', function() {
  // 获取触发模态框的按钮（替换成你实际的按钮选择器）
  const triggerBtn = document.querySelector('[data-bs-target="#managerSelectForCooridnator"]');
  
  triggerBtn.addEventListener('click', function(e) {
    const selectEl = document.querySelector('.classOverridden');
    
    // 同样根据实际情况调整判断逻辑
    if (selectEl.value && selectEl.value.trim() !== '') {
      e.preventDefault(); // 阻止按钮的默认触发行为
      e.stopPropagation(); // 停止事件冒泡
    }
  });
});

注意事项 #

• 确保代码在DOM加载完成后执行（通过DOMContentLoaded事件包裹），避免找不到元素的问题；
• 根据你下拉框的实际结构调整判断条件（比如默认选项的value值、索引位置）；
• 如果使用的是非Bootstrap模态框，只需替换模态框的显示拦截逻辑（比如阻止自定义的显示函数执行）。

内容的提问来源于stack exchange，提问作者Syed Iftekharuddin