Select2使用Ajax加载数据时如何给option标签添加自定义data-*属性

核心逻辑说明：你在processResults回调中返回的otherfield字段已经被Select2存储到内部数据对象中，无需修改这部分逻辑，只需要额外增加配置或事件监听，即可将自定义字段挂载到<option>标签的data-*属性上。

可选实现方案 #

方案1：选中后追加属性（最常用，性能最优） #

仅在用户选中对应选项时，给生成的<option>标签追加自定义属性，适合大多数场景，完整代码如下：

// 原有Select2初始化代码
$('.itemName').select2({
  placeholder: 'Select an item',
  ajax: {
    url: '/autocompleteSearch',
    dataType: 'json',
    delay: 250,
    processResults: function (data,params) {
      return {
        results:  $.map(data, function (item) {
          return {
            id: item.id,
            text: item.title,
            otherfield: item.slug
          }
        })
      };
    },
    cache: true
  }
// 新增：监听select2选中事件，追加自定义属性
}).on('select2:select', function (e) {
  // 拿到选中项的全量数据
  const selectedItem = e.params.data;
  // 匹配对应的option节点
  const $targetOption = $(this).find(`option[value="${selectedItem.id}"]`);
  // 如果只需要jQuery内部可读取data，用data方法（不会展示在DOM源码中）
  $targetOption.data('otherfield', selectedItem.otherfield);
  // 如果需要DOM上可见data-otherfield属性，用attr方法
  $targetOption.attr('data-otherfield', selectedItem.otherfield);
});

方案2：渲染下拉选项时就挂载属性 #

如果需要所有加载出来的下拉选项的DOM节点都提前挂载自定义属性，不需要等用户选中，可以新增templateResult配置：

$('.itemName').select2({
  placeholder: 'Select an item',
  ajax: {
    url: '/autocompleteSearch',
    dataType: 'json',
    delay: 250,
    processResults: function (data,params) {
      return {
        results:  $.map(data, function (item) {
          return {
            id: item.id,
            text: item.title,
            otherfield: item.slug
          }
        })
      };
    },
    cache: true
  },
  // 新增：自定义下拉选项渲染模板
  templateResult: function (item) {
    if (!item.id) return item.text;
    const $option = $('<span></span>').text(item.text);
    // 给渲染的选项节点挂载自定义属性
    $option.attr('data-otherfield', item.otherfield);
    return $option;
  }
// 同步追加选中事件，给隐藏的option节点也挂载属性
}).on('select2:select', function (e) {
  const selectedItem = e.params.data;
  const $targetOption = $(this).find(`option[value="${selectedItem.id}"]`);
  $targetOption.attr('data-otherfield', selectedItem.otherfield);
});

额外提示 #

如果你只需要在JS逻辑中读取自定义字段，不需要属性展示在DOM上，无需额外配置，直接通过$('.itemName').select2('data')即可拿到选中项的全量数据，包括otherfield字段。
内容的提问来源于stack exchange，提问作者Farid HaghGooyan