[HTML]selectタグのメニューにアイコンを表示する

selectタグのメニューはテキストしか表示できません。なのでjQueryプラグインのselect2を使って拡張をします。

手順

parcelを使って開発サーバーを立ち上げます。

npx parcel index.html

localhost:1234 をブラウザで確認してください。

解説

index.jsのselect2() メソッドの引数の formatState() 内でHTMLを生成します

$('.js-example-basic-single').select2({
   templateResult: formatState
 });

以下HTMLを変更することでメニューの表示を変更できます

  var $state = $(
     '<span style="color: Tomato;"><i class="fas fa-' + state.element.value.toLowerCase() + '"></i></span> ' +
     '<span>' + state.text + '</span>'
 );

アイコンの表示はfont awesomeのCSS指定によってしています

実際の生成されたタグ

<span style="color: Tomato;"><i class="fas fa-bell"></i></span>

↓↓↓ダウンロードはこちらです↓↓↓

html-select-icon.zip

69.9 KB

ファイルダウンロードについて

ダウンロード