在选择渲染中使用Select2模板化<span>文本</span>

Question

我在选择样式方面遇到了一些问题。我并不是专业人士，只是在学习过程中，无法独立解决这个问题。我使用了Select2，并找到了最适合选择表单的类型。我尝试了解哪里出了问题，但我还没有能力解决它。我想要一个可以显示带文本的span元素的选择框，而不仅仅是文本，就像图片#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
});

所以我得到了这样的结果：输入图像描述 请帮我解决这个问题！非常感激！

- Dmitriy Kavraiskyi

Answer 1

你只是在设置结果的模板（使用templateResult），但没有为选择设置模板。Select2允许你为选择和结果使用不同的模板（参见AJAX示例），因此你必须使用templateSelection选项来设置选择器的渲染器。

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

- Kevin Brown-Silva