在使用 Select2 实现级联下拉框时，若将 change 事件监听器错误地写在 AJAX 成功回调内，会导致每次请求后重复绑定事件，从而引发多次触发——这是级联逻辑错乱、数据重复渲染的根本原因。
在使用 select2 实现级联下拉框时，若将 `change` 事件监听器错误地写在 ajax 成功回调内，会导致每次请求后重复绑定事件，从而引发多次触发——这是级联逻辑错乱、数据重复渲染的根本原因。
问题的核心在于 事件监听器的生命周期管理不当。您当前的代码中，selectI.on('change', ...) 被嵌套在 fetchDataForButton 的 success 回调中：
success: function (response) {
populateSelectI(response);
selectI.on('change', function () { /* ... */ }); // ❌ 每次 AJAX 成功都重新绑定！
}
这意味着：
- 第 1 次点击按钮 → 绑定第 1 个
change监听器； - 第 2 次点击（即使选同一按钮）→ 再绑定第 2 个相同逻辑的监听器；
- 后续
selectI值变更时，所有已绑定的监听器都会依次执行，造成populateSelectII调用 N 次、文本域重复追加、UI 状态混乱。
✅ 正确做法是：将事件绑定一次性置于初始化阶段（如 $(document).ready 内），与数据加载逻辑解耦。同时，需确保事件处理器能访问到动态变化的上下文（如 buttonId 和 response），可通过闭包或数据缓存实现。
以下是重构后的推荐写法：
@section Scripts {
<!-- 其他脚本引用保持不变 -->
<script type="text/javascript">
const selectI = $('#selectTableInfo1');
const selectII = $('#selectTableInfo2');
let currentButtonId = null;
let currentResponse = null;
$(document).ready(function () {
// 初始化 Select2 实例
selectI.select2({
dropdownParent: $('#demoModal'),
minimumInputLength: 3,
placeholder: 'Select a range:'
});
selectII.select2({
dropdownParent: $('#demoModal'),
minimumInputLength: 3,
placeholder: 'Select a range:',
data: [],
disabled: true
});
// ✅ 一次性绑定 change 事件（不在 AJAX 内！）
selectI.on('change', function () {
const selectedValue = selectI.val();
console.log('selectI changed to:', selectedValue);
if (selectedValue && currentButtonId && currentResponse) {
selectII.prop('disabled', false);
populateSelectII(currentButtonId, currentResponse, selectedValue);
} else {
selectII.prop('disabled', true);
selectII.empty().trigger('change'); // 清空并同步 Select2 状态
}
});
// 绑定按钮点击事件
$('.button-container button').on('click', function (event) {
event.preventDefault();
currentButtonId = $(this).attr('id');
fetchDataForButton(currentButtonId);
});
});
function fetchDataForButton(buttonId) {
$.ajax({
type: 'POST',
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
url: '/wagetable?handler=CollectData',
data: { buttonId: buttonId },
success: function (response) {
console.log('Fetched data for:', buttonId);
currentResponse = response; // 缓存响应数据供 change 处理器使用
populateSelectI(response);
},
error: function (error) {
console.error("Error fetching data:", error);
alert('数据加载失败，请重试。');
}
});
}
// 示例辅助函数（请按实际逻辑补充）
function populateSelectI(data) {
selectI.empty();
$.each(data, function (i, item) {
selectI.append(new Option(item.text, item.value));
});
selectI.trigger('change'); // 同步更新 Select2 显示
}
function populateSelectII(buttonId, response, selectedValue) {
// 此处根据 selectedValue 过滤 response 并填充 selectII
const filtered = response.filter(x => x.parentId === selectedValue);
selectII.empty();
$.each(filtered, function (i, item) {
selectII.append(new Option(item.text, item.value));
});
selectII.trigger('change');
}
</script>
}
? 关键改进点总结：
-
单次绑定：
selectI.on('change', ...)移至$(document).ready内，彻底避免重复注册； -
状态解耦：用
currentButtonId和currentResponse全局变量暂存上下文，使事件处理器可安全访问最新数据； -
Select2 同步：每次操作
selectI/selectII后调用.trigger('change')，确保 Select2 UI 与原生<select></select>值一致； -
防御性检查：
change回调中校验selectedValue、currentButtonId和currentResponse是否有效，防止空值误触发； -
禁用/清空标准化：调用
.prop('disabled', true/false)+.empty().trigger('change')，保障控件状态纯净。
⚠️ 注意事项：
- 切勿在循环、回调或高频触发逻辑中重复调用
.on()； - 若页面存在动态 DOM 加载（如 Tab 切换、模态框重用），建议改用事件委托：
$(document).on('change', '#selectTableInfo1', handler)； - 在 Razor Pages 中，确保
__RequestVerificationToken隐藏字段存在于表单内，否则 AJAX 请求将因防伪令牌缺失而 400； - 生产环境建议对
populateSelectII做防抖或加载状态锁，避免用户快速切换导致竞态。
遵循以上结构，即可稳定实现“按钮 → selectI 加载 → 用户选择 → selectII 加载 → 数据组合输出”的完整级联流程，彻底杜绝重复触发问题。
