选择呈现中的 Select2 模板化 <span>text</span>

Question

我对 select 风格化有很多了解。我不是很专业，我只是在学习，我还不能单独解决这个问题。我使用 select2 并找到了 select 形式最可接受的类型。我试图了解出了什么问题，但我做不到。我想要这样的 select 显示带有文本的跨度，而不仅仅是文本。就像它在 pic#1 上一样。但我一直只得到没有颜色标记的文本 - pic#2.

enter image description here

我的代码是：

<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
});

所以我得到了这样的结果：enter image description here

请帮我解决一下！将不胜感激！

Answer 1

您只是为结果设置模板（使用 templateResult），而不是为选择设置模板。 Select2 允许您对选择和结果使用不同的模板（参见 the AJAX example），因此您必须使用 templateSelection 选项设置选择的渲染器。

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

选择呈现中的 Select2 模板化 <span>text</span>

Select2 Templating <span>text</span> in selection render

html

javascript

select

select2