Select2选择下拉项时重复添加选中条目问题排查与解决

我使用以下代码通过/get_children接口获取子项列表来填充Select2下拉框：

$(document).ready(function() {
    $('.child-select').select2({
        placeholder: 'Select a child',
        allowClear: true,
        ajax: {
            url: '/get_children',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    search: params.term // 向服务器传递搜索关键词
                };
            },
            processResults: function(data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        templateResult: function(child) {
            return $('<span>').text(child.name).attr('title', child.grade);
        }
    }).on('select2:select', function(e) {
        var selectedChild = e.params.data;
        var option = new Option(selectedChild.name, selectedChild.id, true, true);
        $('.child-select').append(option).trigger('change');
});

但每次从下拉框选择子项时，选中项会被添加两次：一个空条目和一个带子项名称的条目。

问题根源 #

你额外绑定了select2:select事件，在里面手动添加Option并触发change——但Select2本身就会自动完成选中项的添加逻辑，这就造成了重复操作；而且手动触发change会打乱Select2的内部流程，进而产生空条目。

修复后的代码 #

直接移除多余的select2:select事件绑定即可，完整代码如下：

$(document).ready(function() {
    $('.child-select').select2({
        placeholder: 'Select a child',
        allowClear: true,
        ajax: {
            url: '/get_children',
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    search: params.term // 向服务器传递搜索关键词
                };
            },
            processResults: function(data) {
                return {
                    results: data
                };
            },
            cache: true
        },
        templateResult: function(child) {
            return $('<span>').text(child.name).attr('title', child.grade);
        }
    });
});

自定义需求兼容 #

如果需要在选中后执行自定义业务逻辑，不要手动添加Option或触发change，直接在事件里写逻辑即可，示例：

// 仅保留自定义逻辑，不修改Select2的选中流程
$('.child-select').on('select2:select', function(e) {
    var selectedChild = e.params.data;
    // 这里写你的自定义操作，比如存储选中ID、更新页面元素等
    console.log('选中的子项：', selectedChild.name, selectedChild.id);
});

内容的提问来源于stack exchange，提问作者Nat Aes