Select2添加默认数据时logo无法显示的问题求助

问题描述 #

使用Select2组件时，搜索功能可正常展示text、id及logo字段，但通过数组添加默认数据时，仅能显示text和id，logo无法渲染。尝试通过$(option).data附加logo数据也未生效，相关代码如下：

原JavaScript代码 #

var d = [{
  "text": "I Like It",
  "id": "427818",
  "logo": "https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.2.0/pandora.svg"
}, {
  "text": "71. I Like It (feat. Kontra K and AK Ausserkontrolle)",
  "id": "146387",
  "logo": "https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.2.0/deezer.svg"
}];

searchfocussongs(d);

function searchfocussongs(data) {

  var apiurl = "";
  var curartistid = "";

  $("#sm_report_focussongs").select2({
    minimumInputLength: 2,
    width: 'resolve',
    templateResult: searchfocussongs_template,
    templateSelection: searchfocussongs_template,
    ajax: {
      url: apiurl + "?f=searchSmSongs&aid=" + curartistid,
      dataType: "json",
      type: "GET",
      processResults: function(data) {
        return {
          results: $.map(data, function(item) {
            return {
              text: item.text,
              id: item.id,
              logo: item.logo
            }
          })
        };
      }
    }
  });

  if (data.length > 0) {
    $(data).each(function() {
      var option = new Option(this.text, this.id, true, true);
      $(option).data('logo', this.logo);
      $("#sm_report_focussongs").append(option).trigger('change');
    });
    $("#sm_report_focussongs").trigger({
      type: 'select2:select',
      params: {
        data: data
      }
    });
  }
}

function searchfocussongs_template(ar) {
  var item = $(
    '<span><img src="' + ar.logo + '"  style="height:20px;width:20px;" /> ' + ar.text + '</span>'
  );
  return item;
}

原HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<select class="form-control" multiple="multiple" id="sm_report_focussongs" style="width:100%">
</select>

解决方案 #

问题核心：直接通过new Option创建DOM元素并附加data-*属性时，Select2不会自动将这些额外字段关联到内部数据源，导致模板函数无法读取logo值。

方法一：初始化时直接传入默认数据（推荐） #

在Select2初始化配置中添加data选项，直接传入包含logo字段的完整数据数组，Select2会自动处理所有字段：

var d = [{
  "text": "I Like It",
  "id": "427818",
  "logo": "https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.2.0/pandora.svg"
}, {
  "text": "71. I Like It (feat. Kontra K and AK Ausserkontrolle)",
  "id": "146387",
  "logo": "https://cdnjs.cloudflare.com/ajax/libs/simple-icons/3.2.0/deezer.svg"
}];

searchfocussongs(d);

function searchfocussongs(data) {

  var apiurl = "";
  var curartistid = "";
  var $select = $("#sm_report_focussongs");

  $select.select2({
    minimumInputLength: 2,
    width: 'resolve',
    templateResult: searchfocussongs_template,
    templateSelection: searchfocussongs_template,
    data: data, // 直接传入默认数据
    ajax: {
      url: apiurl + "?f=searchSmSongs&aid=" + curartistid,
      dataType: "json",
      type: "GET",
      processResults: function(data) {
        return {
          results: $.map(data, function(item) {
            return {
              text: item.text,
              id: item.id,
              logo: item.logo
            }
          })
        };
      }
    }
  });

  // 自动选中默认数据
  if (data.length > 0) {
    $select.val(data.map(item => item.id)).trigger('change');
  }
}

function searchfocussongs_template(ar) {
  // 兼容无logo的情况（如加载状态）
  if (!ar.logo) return ar.text;
  
  return $(`<span><img src="${ar.logo}" style="height:20px;width:20px; margin-right:8px;" /> ${ar.text}</span>`);
}

方法二：手动更新Select2内部数据源 #

如果需要在初始化后动态添加默认数据，可以直接操作Select2的内部数据源，将完整数据对象注入：

// 仅修改添加默认数据的部分
if (data.length > 0) {
  // 设置选中值
  $select.val(data.map(item => item.id)).trigger('change');
  
  // 获取Select2内部数据源
  var select2Data = $select.data('select2').data;
  
  // 注入完整数据对象（避免重复）
  data.forEach(item => {
    if (!select2Data.find(elem => elem.id === item.id)) {
      select2Data.push(item);
    }
  });
  
  // 触发重新渲染
  $select.trigger('select2:render');
}

关键说明 #

• Select2的模板函数templateResult和templateSelection读取的是其内部数据源中的对象，而非DOM元素的data-*属性。
• 两种方法都确保了包含logo的完整数据对象被加入Select2的数据源，模板函数才能正常读取并渲染Logo。

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