.NET Core 6 Razor Pages中Select2 change事件触发两次问题求助

1. 用Select2专属事件替代原生change事件 #

Select2组件自带select2:select事件，这个事件仅在用户完成选择操作时触发一次，不会和原生<select>的change事件产生冲突，从根源避免重复触发问题。

// 按钮点击填充selectI的逻辑
$('#fillSelectIBtn').click(function() {
    // 示例：通过AJAX获取selectI的选项数据
    $.get('/YourPage/GetSelectIOptions', function(data) {
        $('#selectI').empty();
        $.each(data, function(index, item) {
            $('#selectI').append($('<option>').val(item.Id).text(item.Name));
        });
        
        // 先销毁旧的Select2实例，再重新初始化
        $('#selectI').select2('destroy').select2({
            placeholder: '请选择',
            width: '100%'
        });
        
        // 先移除旧绑定，再绑定Select2专属选择事件
        $('#selectI').off('select2:select').on('select2:select', function(e) {
            var selectedId = e.params.data.id;
            // 触发selectII的填充逻辑
            fillSelectII(selectedId);
            // 同步更新文本域
            updateTextField();
        });
    });
});

// 填充selectII的函数
function fillSelectII(parentId) {
    $.get('/YourPage/GetSelectIIOptions?parentId=' + parentId, function(data) {
        $('#selectII').empty().prop('disabled', false);
        $.each(data, function(index, item) {
            $('#selectII').append($('<option>').val(item.Id).text(item.Name));
        });
        
        $('#selectII').select2('destroy').select2({
            placeholder: '请选择',
            width: '100%'
        });
        
        // 绑定selectII的选择事件更新文本域
        $('#selectII').off('select2:select').on('select2:select', function() {
            updateTextField();
        });
    });
}

// 更新目标文本域的函数
function updateTextField() {
    var selectIVal = $('#selectI option:selected').text();
    var selectIIVal = $('#selectII option:selected').text() || '';
    $('#targetTextField').val(`${selectIVal} ${selectIIVal}`.trim());
}

2. 避免事件重复绑定的核心操作 #

• 每次绑定事件前，用off('select2:select')清除之前的事件绑定，确保同一元素只存在一个事件监听。
• 填充选项后，先调用select2('destroy')销毁旧的Select2实例再重新初始化，防止多实例导致的事件触发异常。

3. 页面结构排查 #

• 确保Select2脚本和事件绑定代码只在主页面加载一次，不要在局部视图（Partial View）中重复引用或渲染。
• 检查@section Scripts块，避免因页面局部刷新或循环渲染导致脚本重复执行。

额外排查点 #

• 通过浏览器开发者工具的「事件监听器」面板，查看selectI元素上绑定的事件，移除多余的非必要监听。
• 确认是否有其他业务脚本也监听了selectI的change事件，导致事件叠加触发。

内容的提问来源于stack exchange，提问作者N. Tanaka