Javascript 选择2模板<；span>；文本</span>；在选择渲染中

我有一大堆精选的款式。我不是那么专业，我只是在学习，我还不能独自解决这个问题。 我使用select2并找到了selectform最可接受的类型。我试图理解出了什么问题，但我做不到。我想要这样的选择，用文本显示跨度，而不仅仅是一个文本。如图1所示。但我一直只收到没有颜色标记的文本-图2

我的代码是：

<div class="fieldset fieldset-1">
   <label for="color">Choose color</label>
   <select name="color" class="color-choose">                             
      <option value="grn">Green</option>
      <option value="blu">Blue</option>
      <option value="brn">Brown</option>
      <option value="blk">Black</option>
      <option value="red">Red</option>
      <option value="yel">Yellow</option>
      <option value="wht">White</option>                                  
    </select>
 </div>

选择颜色
绿色
蓝色
棕色的
黑色
红色
黄色的
白色

和JS代码：

function formatState (state) {
  if (!state.id) { return state.text; }
  var $state = $(
    '<span class="color-element color-' + state.element.value + '">' + state.text + '</span>'
  );
  return $state;
};

$(".color-choose").select2({
  templateResult: formatState
});

函数格式化状态（状态）{
如果（！state.id）{return state.text；}
变量$state=$(
''+state.text+''中
);
返回$state；
};
$（“.color choose”）。选择2({
templateResult:formatState
});

所以我得到了这样的结果：

---

请帮我解决它！非常感谢

您仅为结果设置模板（使用

templateResult

），而不是为选择设置模板。Select2允许您为选择和结果使用不同的模板（请参阅），因此必须使用

templateSelection

选项为选择设置渲染器

$(".color-choose").select2({
  templateResult: formatState,
  templateSelection: formatState
});