[自分用メモ] select2のoptions（選択肢）にclassとhtmlを引き継ぐ #JavaScript

select2の選択肢表示に元のoptionタグのcalssとinnerHTMLを引き継ぎたい話
忘れてまた探し回りそうなので自分用コピペメモ

注意点

この方法だと、ただの<option>でも中にタグがないと
$(data.element.innerHTML)のところでjQueryが停止するので、<span>要素で囲む
jsを工夫すればいいのでしょうけど、見づらくなりそうなので一旦これでＯＫとする

コード

select.html

<select id="select">
  <option><span>ただの選択肢</span></option>
  <option class="bg-warning"><i class="fa-solid fa-user-injured"></i><span> 怪我</span></option>
</select>

select2_init.js

$selectEl = $('#select').select2({
  templateResult: (data, container) => { // 一覧に適用する内容
    if (data.element !== void 0) $(container).addClass($(data.element).attr("class"));
    return data.element !== void 0 ? $(data.element.innerHTML) : data.text;
  },
  templateSelection: (data) => {return data.element !== void 0 ? $(data.element.innerHTML) : data.text}, //選択結果表示に適用する内容
});

動作確認環境

Google Chrome 100.0.4896.60 (64bit)
jQuery 3.6.0
select2 4.0.13
select2-bootstrap4-theme 1.5.2
bootstrap 4.6.0 (今回は関係ないけど一応)

いつ使う？

select2の項目にfontawsomeのアイコンと、背景色を指定したかった

参考文献

classコピーの話

HTML渡しの話