jQuery で複数選択ドロップダウンを作成する

Habdul Hazeez 2023年6月21日

jQuery jQuery Dropdown

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>

出力：

Select2 jQuery ライブラリの動作

`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>

出力：

Selectize.js の動作

以下は、上記のコードで maxItems プロパティを有効にした場合の出力です。ここでは、3つの項目に設定しました。そのため、3つを超えるオプションを選択することはできません。

その後、選択メニューは再び表示されなくなります。

選択量制限付きSelectize.js

この 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>

出力：

Selectize.js タグ付け機能

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>

出力：

Multiselect.js の動作

keepOrder の出力は true に設定されます。

keepOrder を true に設定した Multiselect.js

著者： Habdul Hazeez

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.

Select2 を使用して複数選択ドロップダウンを作成する

Selectize.js を使用して複数選択ドロップダウンを作成する

jQuery Multiselect.js を使用して複数選択ドロップダウンを作成する

関連記事 - jQuery Dropdown

`Select2` を使用して複数選択ドロップダウンを作成する

`Selectize.js` を使用して複数選択ドロップダウンを作成する

jQuery `Multiselect.js` を使用して複数選択ドロップダウンを作成する