【jQuery】select2ライブラリをCDNから読み込むやり方を解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、12年目エンジニアです。

この記事では、 jQueryのselect2ライブラリをCDNから読み込むやり方を解説します。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows11

なお、ここで紹介している情報は2023年9月18日現在の情報です。
日にちが経過している場合、異なる可能性がありますので、予めご了承下さい。

select2ライブラリをCDNから読み込むやり方を解説

select2ライブラリをCDNから読み込むやり方を解説します。

以下のselect2ライブラリCDNサイトに行きます。
select2-cdn
jQueryのselect2ライブラリをCDNから読み込むやり方を解説

【Version】のセレクトボックスを選択すると、読み込むバージョンを指定することができます。
特定のバージョンを読み込みたいときは、変更してください。
jQueryのselect2ライブラリをCDNから読み込むやり方を解説

読み込むものは

  • select2.min.js
  • select2.min.css

です。
上から1番目と2番目に位置しています。
jQueryのselect2ライブラリをCDNから読み込むやり方を解説

コピーするには真ん中の【</>】アイコンを押します。
jQueryのselect2ライブラリをCDNから読み込むやり方を解説
アイコンを押すと、クリップボードにコピーされます。

  • select2.min.jsのタグを押したとき

  • select2.min.cssのタグを押したとき

これらのタグをHTMLにタグを埋め込めばselect2ライブラリを使うことができます。
では、次の章で実際に読み込んでみます。

select2の読み込みを確認するプログラムの概要

読み込み確認をするプログラムでは、

  • HTML
  • JavaScript

の2ファイルを使います。
フォルダ構成は以下のようになっています。
jQueryのselect2ライブラリをCDNから読み込むやり方を解説

この記事ではjQueryをcdnから読み込みます。
やり方はこちらの記事をご参考ください。

HTMLサンプルプログラム

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開きます。
jQueryのselect2ライブラリをCDNから読み込むやり方を解説

セレクトボックスを選択すると、選択肢が検索できるのでselect2ライブラリが無事読み込めていることが確認できました。
jQueryのselect2ライブラリをCDNから読み込むやり方を解説

まとめ:select2ライブラリをCDNから読み込んでみよう

以上がjQueryのselect2ライブラリをCDNから読み込むやり方の解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

基本的な使い方については、こちらの記事をご参考ください。

コメント

タイトルとURLをコピーしました