Select2 AJAX远程获取数据后HTML标签无法解析的问题求助

别担心，这个问题其实很容易搞定！Select2默认会转义所有HTML内容（为了安全考虑），所以你的<small>标签才会被原样输出。要让HTML标签正常渲染，你需要用到Select2的templateResult和templateSelection这两个配置项，分别用来自定义下拉列表选项和选中后的显示效果。

完整修改后的代码示例 #

$('#t').select2({
  ajax: {
    url: '../ajax/results.php',
    data: function (params) {
      return {
        search: params.term,
        page: params.page || 1
      };
    }
  },
  // 自定义下拉列表中每个选项的渲染
  templateResult: function(data) {
    // 处理加载状态（AJAX请求过程中会触发）
    if (data.loading) {
      return data.text;
    }
    // 用jQuery把返回的text转换成DOM元素，自动解析HTML
    return $('<span>' + data.text + '</span>');
  },
  // 自定义选中后输入框内的渲染
  templateSelection: function(data) {
    // 同样用jQuery解析HTML，保持和下拉选项一致的显示
    return $('<span>' + data.text + '</span>');
  }
});

代码说明 #

• templateResult: 这个函数负责渲染下拉列表里的每一个选项。我们先判断是否处于加载状态（Select2会自动传入loading: true的data对象），如果是就直接返回文本；否则用jQuery创建一个<span>元素，把返回的data.text放进去，这样HTML标签就会被正常解析渲染。
• templateSelection: 这个函数负责渲染选中后显示在Select2输入框里的内容，逻辑和templateResult一致，确保选中后的样式和下拉选项保持统一。

这样修改后，你的<small>标签就会被正确解析成小字体的文本，而不是原样输出标签代码了。

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