Thymeleaf与JavaScript实现基于下拉选择的Bootstrap模态框条件触发

<div class="form-row">
    <div class="form-group col-4 text-left pt-2">
        <label class="form-group font-weight-bold"> [[#{review.differentBCMClass}]] :</label>
    </div>
    <div class="form-group col-2 text-left pt-2">
        <!-- 为下拉选择框添加ID -->
        <select th:field="*{classOverridden}" id="classOverriddenSelect" name="classOverridden">
            <option value="" default>[[#{pleaseSelect}]]</option>
            <option class="text-center" th:value="1">1</option>
            <option class="text-center" th:value="2">2</option>
            <option class="text-center" th:value="3">3</option>
            <option class="text-center" th:value="4">4</option>
            <option class="text-center" th:value="0">0</option>
        </select>
    </div>
</div>

<!-- ... 其他表单内容 ... -->

<div class="form-group form-row text-center"
     th:if="${role.roleName != 'Manager' and role.roleName != 'Officer' }">
    <div class="form-group col text-center pt-2">
        <!-- 为提交按钮添加ID -->
        <button type="button"
                id="submitButton"
                class="btn btn-info btn-block"
                role="button"
                data-toggle="modal"
                data-target="#managerSelectForCooridnator">
            [[#{review.submit}]]
        </button>
    </div>
</div>

// 获取DOM元素
const submitButton = document.getElementById('submitButton');
const selectElement = document.getElementById('classOverriddenSelect');

// 为下拉选择框添加change事件监听器
selectElement.addEventListener('change', function() {
    // 检查下拉框的当前值
    if (selectElement.value !== '') {
        // 如果值不是默认空值（即选择了某个选项），则移除模态框触发属性
        submitButton.removeAttribute('data-toggle');
        submitButton.removeAttribute('data-target');
        // 可选：如果按钮原本有formaction属性，可以在这里设置，使其直接提交到某个URL
        // submitButton.setAttribute('formaction', '/someOtherURL');
    } else {
        // 如果值是默认空值（即重新选择了“请选择”），则恢复模态框触发属性
        submitButton.setAttribute('data-toggle', 'modal');
        submitButton.setAttribute('data-target', '#managerSelectForCooridnator');
        // 可选：如果之前设置了formaction，这里需要移除或重置
        // submitButton.removeAttribute('formaction');
    }
});

// 注意事项：页面加载时的初始状态处理
// 如果页面加载时，selectElement.value 已经不是空字符串，也需要执行一次判断
document.addEventListener('DOMContentLoaded', function() {
    if (selectElement.value !== '') {
        submitButton.removeAttribute('data-toggle');
        submitButton.removeAttribute('data-target');
    }
    // 否则，保持默认的data-toggle和data-target属性
});