在使用 Select2 实现级联下拉框时，若将 change 事件监听器错误地写在 AJAX 成功回调内，会导致每次请求后重复绑定，从而引发事件被触发多次——这是级联选择失效、数据重复渲染的核心原因。
在使用 select2 实现级联下拉框时，若将 `change` 事件监听器错误地写在 ajax 成功回调内，会导致每次请求后重复绑定，从而引发事件被触发多次——这是级联选择失效、数据重复渲染的核心原因。
在 .NET Core 6 Razor Pages 中集成 Select2 实现级联选择（如 selectI 控制 selectII）时，一个常见却隐蔽的陷阱是：将 selectI.on('change', ...) 逻辑放在 fetchDataForButton 的 AJAX success 回调中。这看似合理（“等数据加载完再监听”），实则违反事件绑定的基本原则——每次按钮点击并成功返回数据后，都会为 selectI 新增一个独立的 change 监听器。当用户后续选择选项时，所有已绑定的监听器将依次执行，造成 populateSelectII 被调用 N 次（N = 历史点击次数），最终导致 selectII 重复渲染、textarea 数据错乱、控制台日志重复输出等典型症状。
✅ 正确做法：事件监听应与数据加载解耦，仅绑定一次。将 change 事件统一移至 $(document).ready() 初始化阶段，并利用闭包或全局状态管理依赖参数（如 buttonId 和 response）。由于 buttonId 和 response 在点击瞬间才确定，我们可通过以下两种方式安全传递：
方式一：使用数据属性暂存上下文（推荐）
$(document).ready(function () {
const selectI = $('#selectTableInfo1');
const selectII = $('#selectTableInfo2');
// 初始化 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 事件
selectI.on('change', function () {
const selectedValue = selectI.val();
// 从 DOM 元素上读取最新绑定的 buttonId 和 response
const buttonId = selectI.data('last-button-id');
const response = selectI.data('last-response');
if (selectedValue) {
selectII.prop('disabled', false);
populateSelectII(buttonId, response, selectedValue);
} else {
selectII.prop('disabled', true).empty();
}
});
// ✅ 按钮点击：只负责获取数据并缓存上下文，不绑定事件
$('.button-container button').on('click', function (event) {
event.preventDefault();
const buttonId = $(this).attr('id');
$.ajax({
type: 'POST',
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
url: '/wagetable?handler=CollectData',
data: { buttonId: buttonId },
success: function (response) {
console.log('Data fetched for:', buttonId);
populateSelectI(response);
// ✅ 将本次请求的上下文存入 selectI 元素（覆盖旧值）
selectI.data('last-button-id', buttonId);
selectI.data('last-response', response);
},
error: function (error) {
console.error("Error fetching data:", error);
}
});
});
});
方式二：使用闭包 + 状态变量（适用于简单场景）
let currentButtonId = null;
let currentResponse = null;
$(document).ready(function () {
// ... Select2 初始化同上 ...
selectI.on('change', function () {
const selectedValue = selectI.val();
if (selectedValue && currentButtonId && currentResponse) {
selectII.prop('disabled', false);
populateSelectII(currentButtonId, currentResponse, selectedValue);
} else {
selectII.prop('disabled', true).empty();
}
});
$('.button-container button').on('click', function (event) {
event.preventDefault();
currentButtonId = $(this).attr('id'); // 更新全局状态
$.ajax({
// ... 同上 ...
success: function (response) {
currentResponse = response; // 更新全局状态
populateSelectI(response);
}
});
});
});
⚠️ 注意事项：
- ❌ 避免在任何循环、回调或重复执行逻辑中调用
.on('change', ...)，否则必然累积监听器； - ✅ 使用
.data()存储上下文比全局变量更安全（避免多实例冲突）； - ? 可通过
console.log(selectI.data('events'))（需 jQuery 事件调试插件）或getEventListeners(selectI[0])（Chrome DevTools）验证是否仅存在一个change监听器； - ? 若页面存在多个类似级联组，请为每个
selectI分配唯一 ID 并单独管理其data属性，避免状态污染。
通过将事件绑定“一次性声明化”并采用数据属性解耦动态上下文，即可彻底根除重复触发问题，让级联逻辑清晰、可预测、易维护。
