如何为Select2列表项添加原生选项的真实值

一、给已选li标签添加真实值属性 #

可以通过Select2的templateSelection配置项自定义选中项的渲染逻辑，在生成的li标签上添加data-real-value属性：

修改你的初始化代码，新增templateSelection配置：

var $selectclass = $("#select2ajax").select2({
    selectOnClose: true,
    width: '100%',
    ajax: {
      url: "ajaxcall.php",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term // search term
        };
      },
      processResults: function (data) {
        return {
          results: $.map(data, function(obj) {
            return { id: obj.id, text: obj.text };
          })
        };
      },
      cache: true,
    },
    minimumInputLength: 2,
    containerCssClass: 'class',
    dropdownCssClass: 'class',
    // 自定义选中项渲染逻辑
    templateSelection: function (selectedOption) {
        var $span = $('<span></span>').text(selectedOption.text);
        // 延迟执行，确保能找到Select2生成的li容器
        setTimeout(function() {
            $span.closest('.select2-selection__choice').attr('data-real-value', selectedOption.id);
        }, 0);
        return $span;
    }
});

这里用setTimeout是因为Select2会先渲染返回的文本元素，再将其包裹到li标签中，延迟执行才能准确找到对应的li元素并添加属性。

二、监听已选标签的点击事件 #

由于Select2的li标签是动态生成的，需要用事件委托绑定点击监听，绑定到页面中固定存在的父元素（比如document）：

// 监听已选标签的点击操作
$(document).on('click', '.select2-selection__choice', function(e) {
    // 排除点击移除按钮的情况（不需要的话可以删除此判断）
    if (!$(e.target).hasClass('select2-selection__choice__remove')) {
        var realValue = $(this).attr('data-real-value');
        var itemText = $(this).text().trim();
        // 这里写入你的业务逻辑
        console.log('点击标签：值=' + realValue + '，文本=' + itemText);
    }
});

通过判断点击目标的类名，可以区分用户是点击了标签本身还是移除按钮，避免误触发逻辑。

补充：初始化时已选中项的处理 #

如果页面初始化时就有预选中的选项（非AJAX加载），可以在Select2初始化完成后，手动为这些已存在的li标签添加属性：

$selectclass.on('select2:open', function() {
    $('.select2-selection__choice').each(function() {
        var optionId = $(this).attr('data-select2-id');
        var realValue = $('#select2ajax option[data-select2-id="' + optionId + '"]').val();
        $(this).attr('data-real-value', realValue);
    });
});

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