jQuery で複数選択ドロップダウンを作成する
-
Select2を使用して複数選択ドロップダウンを作成する -
Selectize.jsを使用して複数選択ドロップダウンを作成する -
jQuery
Multiselect.jsを使用して複数選択ドロップダウンを作成する
この記事では、jQuery で複数選択ドロップダウンを作成する方法について説明します。 3つのライブラリを使用してこれを行います。 Select2、Selectize.js、および jquery multiselect.js。
これらのライブラリにはさまざまな実装がありますが、複数選択ドロップダウンを作成するのに役立ちます。
Select2 を使用して複数選択ドロップダウンを作成する
Select2 は、通常の HTML <select> メニューを複数選択メニューに変えることができる jQuery ライブラリです。 開始するには、<select> メニューの <option> フィールドにいくつかのデータがあることを確認してください。
そこから、cdnjs の Select2 JavaScript および CSS ファイルをインクルードします。 これらのファイルを jQuery とともに <head> 要素に配置することをお勧めします。
次に、外部 JavaScript ファイルまたは <script> タグで、<select> メニューで Select2 を呼び出すことができます。 その後、ニーズに合わせてメニューをカスタマイズできます。
たとえば、プレースホルダー テキストを変更して、クリア ボタン を含めることができます。 さらに、Select2 を使用すると、ユーザーは <select> メニューにないデータを含めることができます。
以下のコード例では、Select2 を使用して <select> メニューをカスタマイズしています。 また、前の段落で説明したカスタマイズも見つかります。
さらにカスタマイズが必要な場合は、公式の Web サイト を確認してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>01-jQuery-multi-select-with-select2</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Include Select2 js library and its CSS files -->
<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>
</head>
<body>
<main>
<form>
<label>Select G7 Countries</label>
<select class="G7-countries" name="g7[]" multiple="multiple" style="width: 50%;">
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</form>
</main>
<script>
$(document).ready(function() {
$('.G7-countries').select2({
placeholder: 'Select G7 countries',
allowClear: true,
tags: true // With this, you can add data that are not in the select options
});
});
</script>
</body>
</html>
出力：
Selectize.js を使用して複数選択ドロップダウンを作成する
Selectize.js は、<select> メニューをドロップダウン メニューに変えるもう 1つのライブラリです。 Select2 と同様に、より多くのカスタマイズがあります。
これには、選択数の制限と削除ボタンの追加が含まれます。 また、バックアップに復元 があるため、選択したオプションを削除せずに Backspace を押すことができます。
以下の最初の例は、<select> メニューをドロップダウン メニューに変更する方法を示しています。 また、選択の数を制限するオプションを追加しました。 しかし、コメントとして残しました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-multi-select-with-selectize-js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Include Selectize JS files and a CSS library here,
we are using Bootstrap5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js" integrity="sha512-pgmLgtHvorzxpKra2mmibwH/RDAVMlOuqU98ZjnyZrOZxgAR8hwL8A02hQFWEK25V40/9yPYb/Zc+kyWMplgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.bootstrap5.min.css" integrity="sha512-w4sRMMxzHUVAyYk5ozDG+OAyOJqWAA+9sySOBWxiltj63A8co6YMESLeucKwQ5Sv7G4wycDPOmlHxkOhPW7LRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<main>
<form>
<label>Select G7 Countries</label>
<select class="G7-countries" name="g7[]" multiple="multiple" style="width: 50%;">
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</form>
</main>
<script>
$(".G7-countries").selectize({
// maxItems: 3,
});
</script>
</body>
</html>
出力：
以下は、上記のコードで maxItems プロパティを有効にした場合の出力です。 ここでは、3つの項目に設定しました。 そのため、3つを超えるオプションを選択することはできません。
その後、選択メニューは再び表示されなくなります。
この 2 番目の例の HTML を単一の <input> フィールドに変更しました。 これにより、タグ付けシステムを作成できます。 入力すると、選択したオプションに含まれます。
さらに、remove_button および restore_on_backspace プラグインを有効にしました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-multi-select-with-selectize-js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Include Selectize JS files and a CSS library here,
we are using Bootstrap5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/js/standalone/selectize.min.js" integrity="sha512-pgmLgtHvorzxpKra2mmibwH/RDAVMlOuqU98ZjnyZrOZxgAR8hwL8A02hQFWEK25V40/9yPYb/Zc+kyWMplgaA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.6/css/selectize.bootstrap5.min.css" integrity="sha512-w4sRMMxzHUVAyYk5ozDG+OAyOJqWAA+9sySOBWxiltj63A8co6YMESLeucKwQ5Sv7G4wycDPOmlHxkOhPW7LRg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<main>
<form>
<input id="input-tags" type="text" name="" style="width: 30%;">
</form>
</main>
<script>
$("#input-for-tags").selectize({
plugins: ["remove_button", "restore_on_backspace"], // plugins
delimiter: ",",
persist: false,
create: function (input) {
return {
value: input,
text: input,
};
},
});
</script>
</body>
</html>
出力：
jQuery Multiselect.js を使用して複数選択ドロップダウンを作成する
Multiselect.js は Select2 や Selectize.js と同じように機能しますが、<select> メニューの外観は異なります。 また、<select> メニューをカスタマイズした後、選択順序を維持するオプションを有効にすることができます。
これがないと、Multiselect.js は選択内容をアルファベット順に並べ替えます。 開始するには、彼らのウェブサイト から Multiselect.js をダウンロードし、次の手順を実行します。
- ダウンロードした
.zipファイルを解凍します。 jsフォルダーを見つけて、jquery.multi-select.jsを作業ディレクトリーにコピーします。cssフォルダーを見つけて、multi-select.cssファイルを作業ディレクトリーにコピーします。imgフォルダーを見つけて、switch.pngをコピーします。- 作業ディレクトリに
imgフォルダーを作成し、switch.pngを貼り付けます。 jquery.multi-select.jsおよびmulti-select.cssファイルを HTML ファイルにリンクします。
次のコード例は、動作中の Multiselect.js を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>02-jQuery-multi-select-with-selectize-js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="multi-select-js-and-css/jquery.multi-select.js"></script>
<link rel="stylesheet" type="text/css" href="multi-select-js-and-css/multi-select.css">
</head>
<body>
<main>
<form>
<label>Select G7 Countries</label>
<select id="G7-countries" multiple="multiple" style="width: 30%;">
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</form>
</main>
<script>
$('#G7-countries').multiSelect({
// keepOrder: true
});
</script>
</body>
</html>
出力：
keepOrder の出力は true に設定されます。
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn