编程为Select2添加带额外数据的选项时自定义属性丢失如何解决

你当前写法的核心问题是：new Option()生成的DOM选项默认仅能存储id（对应value）和text两个字段，手动触发select2:select事件仅会触发绑定的事件回调，不会将额外字段写入Select2的内部数据缓存，因此调用select2('data')时只能读取到DOM上存储的两个基础字段。

方案1：直接调用Select2内部接口（推荐） #

直接通过Select2实例的触发方法完成选择，会自动存储完整数据到内部缓存：

// 定义包含自定义字段的完整选项数据
const fullOptionData = {
    id: 'id',
    text: 'value',
    anotherId: 'anotherID',
    moreData: 'moreData'
};
// 获取Select2实例
const select2Ins = $('#mySelect2').data('select2');
// 触发内部选择逻辑，自动存储完整数据
select2Ins.trigger('select', {
    data: fullOptionData
});
// 触发change事件同步表单状态和视图
$('#mySelect2').trigger('change');

方案2：绑定数据到DOM Option元素 #

如果需要保留创建Option的写法，可将完整数据绑定到Option节点的data属性上，Select2会自动识别读取：

// 创建基础Option
let option = new Option('value', 'id', true, true);
// 绑定完整自定义数据到Option节点
$(option).data('data', {
    id: 'id',
    text: 'value',
    anotherId: 'anotherID',
    moreData: 'moreData'
});
// 插入到Select2并触发更新
$('#mySelect2').append(option).trigger('change');

以上两种方案实现后，再调用$('#mySelect2').select2('data')，即可获取到包含所有自定义字段的完整数据，效果和用户手动选择下拉框的AJAX选项完全一致。

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