Erstellen Sie Multiselect-Dropdown in jQuery

Habdul Hazeez 15 Februar 2024

jQuery jQuery Dropdown

Multiselect-Dropdown mit Select2 erstellen
Multiselect-Dropdown mit Selectize.js erstellen
Multiselect-Dropdown mit jQuery erstellen Multiselect.js

Erstellen Sie Multiselect-Dropdown in jQuery

In diesem Artikel erfahren Sie, wie Sie in jQuery ein Dropdown-Menü mit Mehrfachauswahl erstellen. Wir werden dies mit drei Bibliotheken tun; Select2, Selectize.js und jquery multiselect.js.

Diese Bibliotheken haben unterschiedliche Implementierungen, aber sie helfen Ihnen, ein Dropdown-Menü mit Mehrfachauswahl zu erstellen.

Multiselect-Dropdown mit `Select2` erstellen

Select2 ist eine jQuery-Bibliothek, mit der Sie ein normales HTML-<select>-Menü in ein Multiselect-Menü umwandeln können. Stellen Sie zunächst sicher, dass Ihr <select>-Menü einige Daten in den <option>-Feldern enthält.

Binden Sie von dort Select2 JavaScript- und CSS-Dateien von cdnjs ein. Am besten platzieren Sie diese Dateien zusammen mit jQuery im Element <head>.

Dann können Sie in einer externen JavaScript-Datei oder einem <script>-Tag Select2 im <select>-Menü aufrufen. Anschließend können Sie das Menü an Ihre Bedürfnisse anpassen.

Sie können beispielsweise den Platzhaltertext ändern und einen clear button einbauen. Darüber hinaus ermöglicht Select2 Ihrem Benutzer, Daten einzubeziehen, die nicht im Menü <select> enthalten sind.

Im folgenden Codebeispiel haben wir Select2 verwendet, um das Menü <select> anzupassen. Außerdem finden Sie die Anpassungen, über die wir im letzten Absatz gesprochen haben.

Wenn Sie weitere Anpassungen benötigen, können Sie die offizielle Website besuchen.

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

Ausgang:

Select2 jQuery-Bibliothek in Aktion

Multiselect-Dropdown mit `Selectize.js` erstellen

Selectize.js ist eine weitere Bibliothek, die Ihr <select>-Menü in ein Dropdown-Menü verwandelt. Wie Select2 hat es mehr Anpassungen.

Dazu gehört die Begrenzung der Auswahlmöglichkeiten und das Hinzufügen einer Schaltfläche Entfernen. Außerdem verfügt es über Restore on backup, sodass Sie Backspace drücken können, ohne die ausgewählte Option zu löschen.

Das erste Beispiel unten zeigt, wie man ein <select>-Menü in ein Dropdown-Menü umwandelt. Außerdem haben wir eine Option hinzugefügt, um die Anzahl der Auswahlmöglichkeiten zu begrenzen; aber wir haben es als Kommentar hinterlassen.

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

Ausgang:

Selectize.js in Aktion

Das Folgende ist die Ausgabe, wenn Sie die Eigenschaft maxItems im obigen Code aktivieren. Hier haben wir es auf drei Elemente eingestellt; Daher können Sie nicht mehr als drei Optionen auswählen.

Danach wird das Auswahlmenü nicht mehr angezeigt.

Selectize.js mit Einschränkungen hinsichtlich der Auswahlmenge

Wir haben den HTML-Code in diesem zweiten Beispiel in ein einzelnes <input>-Feld geändert. Damit können Sie ein Tagging-System erstellen; wo Sie tippen, und es ist in den ausgewählten Optionen enthalten.

Außerdem haben wir die Plugins remove_button und restore_on_backspace aktiviert.

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

Ausgang:

Selectize.js-Tagging-Funktion

Multiselect-Dropdown mit jQuery erstellen `Multiselect.js`

Multiselect.js funktioniert wie Select2 und Selectize.js, aber das Menü <select> sieht anders aus. Außerdem können Sie nach dem Anpassen des <select>-Menüs eine Option aktivieren, um die Auswahlreihenfolge beizubehalten.

Ohne sie ordnet Multiselect.js Ihre Auswahl alphabetisch. Laden Sie zunächst Multiselect.js von ihrer Website herunter und gehen Sie wie folgt vor.

Extrahieren Sie die heruntergeladene .zip-Datei.
Suchen Sie den Ordner js und kopieren Sie die jquery.multi-select.js in Ihr Arbeitsverzeichnis.
Suchen Sie den Ordner css und kopieren Sie die Datei multi-select.css in Ihr Arbeitsverzeichnis.
Suchen Sie den Ordner img und kopieren Sie switch.png.
Erstellen Sie einen img-Ordner in Ihrem Arbeitsverzeichnis und fügen Sie switch.png ein.
Verknüpfen Sie die Dateien jquery.multi-select.js und multi-select.css mit Ihrer HTML-Datei.

Das nächste Codebeispiel zeigt Multiselect.js in Aktion.

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

Ausgang:

Multiselect.js in Aktion

Der Ausgang bei keepOrder wird auf true gesetzt.

Multiselect.js, wobei keepOrder auf true gesetzt ist

Autor: 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.

Multiselect-Dropdown mit Select2 erstellen

Multiselect-Dropdown mit Selectize.js erstellen

Multiselect-Dropdown mit jQuery erstellen Multiselect.js

Verwandter Artikel - jQuery Dropdown

Multiselect-Dropdown mit `Select2` erstellen

Multiselect-Dropdown mit `Selectize.js` erstellen

Multiselect-Dropdown mit jQuery erstellen `Multiselect.js`