3

私は選択した様式化に積み重なっています。私はそれほどプロではありません。ただ学んでいるだけで、この問題を一人で解決することはまだできません。私はselect2を使用し、選択フォームに最も受け入れられるタイプを見つけました。何が問題なのか理解しようとしましたが、できませんでした。テキストだけでなく、テキストでスパンを表示するような選択が必要です。pic#1のように。しかし、私はいつもカラーマークのないテキストだけを取得します - pic#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
});

だから私はそのような結果を得ました： ここに画像の説明を入力してください

解決するのを手伝ってください！非常に高く評価されます!

4

1 に答える 1

2

You are only setting the template for the results (using templateResult), but you are not setting the template for the selection. Select2 allows you to use different templates for selections and results (see the AJAX example), so you must set the renderer for selections using the templateSelection option.

$(".color-choose").select2({
  templateResult: formatState,
  templateSelection: formatState
});
于 2016-01-08T21:37:11.463 に答える