Select2 | 高機能な検索ドロップダウンを実装 | 複数の実例で理解するJavaScriptライブラリ解説

INDEX

Select2についての解説

Select2についての解説

Select2は、標準のHTMLのセレクトボックスを強化し、検索機能や複数選択、非同期検索などを簡単に実装できるJavaScriptライブラリです。多機能なドロップダウンメニューを提供し、使いやすさと拡張性を両立しています。

Select2の実装方法

Select2を使用するには、以下のCSSとJavaScriptファイルを<head>内に記述して読み込みます。

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Select2の特徴

特徴	説明
検索機能	大量の選択肢から素早く検索して選択可能。
複数選択機能	複数の項目を一度に選択することが可能。
非同期データ読み込み	リモートデータソースとの連携が可能で、サーバーからのデータ読み込みも容易。
カスタマイズ可能	テーマや表示スタイルの調整が柔軟に可能。

プロパティとその値の一覧表

プロパティ名	説明	値の例
placeholder	セレクトボックスに表示されるプレースホルダーテキストを設定。	“項目を選択”
allowClear	選択した項目をクリアできるボタンを表示。	true, false
multiple	複数選択が可能なセレクトボックスに変更。	true, false
ajax	非同期でデータを取得し、動的に選択肢を表示。	{ url: ‘…’, data: function (params) {…} }

基本的なSelect2を使用する例

実行例

HTMLとJavaScriptコード

<select id="basic-select" style="width: 100%;">
    <option value="1">選択肢 1</option>
    <option value="2">選択肢 2</option>
    <option value="3">選択肢 3</option>
</select>

<script>
$('#basic-select').select2();
</script>

解説

この例では、基本的なSelect2セレクトボックスを作成しています。選択肢を選ぶと自動的にSelect2のスタイルが適用され、視覚的に洗練されたドロップダウンメニューとなります。

検索機能付きのSelect2を使用する例

実行例

HTMLとJavaScriptコード

<select id="searchable-select" style="width: 100%;">
    <option></option>
    <option value="1">選択肢 A</option>
    <option value="2">選択肢 B</option>
    <option value="3">選択肢 C</option>
</select>

<script>
$('#searchable-select').select2({
    placeholder: "項目を選択",
    allowClear: true
});
</script>

解説

この例では、検索機能が追加されたSelect2セレクトボックスを作成しています。プレースホルダーを設定し、選択済みの項目をクリアする機能も搭載しています。

複数選択が可能なSelect2を使用する例

実行例

HTMLとJavaScriptコード

<select id="multiple-select" style="width: 100%;" multiple="multiple">
    <option value="1">選択肢 X</option>
    <option value="2">選択肢 Y</option>
    <option value="3">選択肢 Z</option>
</select>

<script>
$('#multiple-select').select2({
    placeholder: "複数の項目を選択",
    allowClear: true
});
</script>