20 Bootstrap-Multiselect-Boxen für Ihre Web-App

Unsere Bootstrap-Multiselect-Widgets helfen Ihren Benutzern, mehrere Elemente bequem auf Mobilgeräten und Desktops auszuwählen. (Sie können sogar Grenzen setzen!)

Wir haben dafür gesorgt, dass Sie ein VIELSEITIGES Bündel von Beispielen erstellen, die Sie auf alles anwenden können.

Der Code ist einfach und anfängerfreundlich, perfekt für Benutzer aller Erfahrungsstufen .

Für die Verwendung eines Bootstrap-Multiselect-Widgets ist es erforderlich, dass Sie zuerst die jQuery-JavaScript-Bibliothek einbinden.

Führen Sie es aus, bevor Sie die Haupt-JavaScript-Datei von Bootstrap verwenden. Die JS- und CSS-Dateien des Plugins müssen auch in der <head. Sie können sie direkt von der GitHub-Webseite des Webentwicklers installieren.

Die einfache Idee , das Element <select> zu entwickeln, stellt sicher, dass Sie ein eindeutiges und bestimmtes Attribut haben. Es ist erforderlich, das Attribut von multiple=”multiple” value=”somevalue” zu identifizieren.

Es ist eine Auswahl von Optionen, die Sie in die Komponente der Anzahl von <option>-Elementen einschließen müssen. Dadurch erhalten sie die benötigten value=”some-value”-Attribute.

Sie haben auch die KONTROLLE über den Stil. Bereichern Sie das Multiselect Ihrer Wahl nach Belieben.

Schnelle Nummer. Und. Leicht.

Beste Bootstrap-Multiselect-Widgets

Mehrfachauswahl V01

Beginnen wir mit einem einfachen Bootstrap-Multiselect-Widget zur Auswahl von Programmiersprachen. Bevor wir weitermachen: Wenn Sie dieses kostenlose Snippet für etwas anderes verwenden möchten, können Sie es nach Herzenslust modifizieren .

Aber wirklich, das Design ist sehr einfach und einfach, um sicherzustellen, dass es standardmäßig mit verschiedenen Projekten und Anwendungen funktioniert.

Während der Benutzer verschiedene Elemente MANUELL auswählen kann, kann er auch einfach auf das Feld "Alles auswählen" klicken, wenn ihn alles interessiert. Darüber hinaus zeigt die Hauptleiste die Auswahl des Benutzers an.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V02

Machen Sie es Ihren Benutzern mit Multiselect V02 einfach und bequem, verschiedene Themen auszuwählen. Es ist ein Bootstrap-Widget, das elegant auf mobilen und Desktop-Geräten angezeigt wird.

Das Widget hat ein ziemlich minimalistisches Aussehen und stellt sicher, dass Sie keine Änderungen daran vornehmen müssen, sondern es so verwenden, wie es ist.

Wenn Sie das Thema auswählen, erscheint es im Anzeigefeld mit der Option, auf das X-Zeichen zu klicken, um es zu entfernen. Egal, ob Sie ein Thema oder alle auswählen, dieser Multiselect unterstützt beides.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V03

Wenn das Bootstrap-Multiselect-Snippet oben den Namen des Themas bei der Auswahl anzeigt, hält es dieses mit der Nummernauswahl SEHR einfach.

Die Hauptspezialität von Multiselect V03 ist jedoch die Änderung der Farbe der Schrift der Sprache. Beim Schweben wird es blau, aber beim Klicken wird es blau und fett.

Die flexible Struktur sorgt zudem für eine reibungslose Anpassung an Mobil-, Tablet- und Desktop-Geräte.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V04

Multiselect V04 ist ein Balken mit „nichts ausgewählt“ und einem Chevron. Sobald Sie darauf klicken, öffnet sich ein Dropdown mit mehreren Optionen zur Auswahl.

Sobald Sie ein Element auswählen, erscheint ein blauer Klickeffekt mit einem roten Häkchen und eine Anzeige des Elements in der Hauptleiste.

Jeder kann beliebig viele Elemente, Themen oder andere Dinge auswählen oder abwählen, unabhängig davon, welches Gerät er verwendet.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V05

Multiselect V05 ist ein fantastisches kostenloses Bootstrap-Snippet, mit dem Sie die Mehrfachauswahl in Ihrer Anwendung oder Website realisieren können.

Egal, was das Hauptziel der Multi-Select ist, Sie können diese bequem und effektiv für alles nutzen.

Das Widget hat ein etwas breiteres Layout als einige unserer anderen Alternativen, was die Anzeige verschiedener Auswahlen bequemer macht.

Das Dropdown-Menü enthält standardmäßig auch Kontrollkästchen und fünf Optionen. Machen Sie es zu Ihrem, verfeinern Sie es und gehen Sie von dort aus.

Weitere Informationen / Demo herunterladen

Multiselect V06

Multiselect V06 kann wie jedes andere durchschnittliche Bootstrap-Multiselect-Widget aussehen, aber es ist weit davon entfernt. Mit modernem Design und coolen Animationen weiß dieser kostenlose Ausschnitt, wie man Dinge aufpeppt .

Mit anderen Worten, wenn Sie nach etwas suchen, das nicht zu traditionell ist, werden Sie mit Multiselect V06 das Richtige tun.

Aber zuerst können Sie es testen, indem Sie die Live-Demo-Vorschau besuchen (auch auf einem mobilen Gerät).

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V07

Einige Multiselects aus dieser Kollektion sind eher minimalistisch, während andere ziemlich kreativ sind. Wer eher auf Letzteres steht, sollte sich gleich die Leistung des Multiselect V07 ansehen.

Es verfügt über ein Feld, das beim Bewegen der Maus reagiert und die Farbe des Textes und der Kontur ändert. Sobald Sie darauf klicken, erscheint ein fettes Dropdown-Menü mit verschiedenen Themen, die aus dem Dropdown-Menü verschwinden und beim Klicken in der Hauptleiste erscheinen.

Probieren Sie es aus, probieren Sie es selbst aus.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V08

Eine Bootstrap-Mehrfachauswahl kann nur aus Themen oder Elementen bestehen, aus denen Sie auswählen können, aber Sie können sie auch in verschiedene Kategorien unterteilen .

Dies ist besonders hilfreich, wenn es viele Artikel gibt, da es die Benutzererfahrung beim Auffinden der Dinge verbessert, die sie interessieren.

Multiselect V08 ist ein großartiges Beispiel dafür, das Sie jetzt ins Spiel bringen und die Dinge schnell erledigen können.

Es verfügt auch über einen Hover-Effekt und eine anfängerfreundliche Codestruktur, damit jeder das Beste daraus machen kann.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V09

Für alle, die zu dieser Sammlung gekommen sind, suchen Sie nach einem dunklen Multiselect-Snippet, tun Sie sich selbst einen Gefallen und wählen Sie Multiselect V09. Es ist eine moderne Alternative mit allem Notwendigen, um Sie sofort voranzubringen.

Das Tool ist für eine hervorragende mobile und Desktop-Leistung optimiert und enthält leicht verständlichen Code.

Um die Gesamtdarstellung dynamischer und optisch ansprechender zu gestalten, bereichert Multiselect V09 mit einem einprägsamen Gelbton.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V10

Wenn es um eine Mehrfachauswahl mit einer Menge Stücken geht, kann es sehr umständlich sein, sie durch Scrollen zu finden. Um das Leben des Benutzers viel einfacher zu machen, ist hier Multiselect V10.

Dieses kostenlose Snippet enthält eine praktische Live-Suchfunktion , die Treffer anzeigt, sobald Sie mit der Eingabe beginnen.

Sie können dann auf das X-Zeichen klicken, um die Suchleiste zu leeren und mit einer neuen Suche zu beginnen.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V11

Diese Bootstrap-Mehrfachauswahl bietet zwei Möglichkeiten, die Elemente aus der Dropdown-Liste auszuwählen.

Zuerst können Sie sie durchsuchen und die gewünschten auswählen, indem Sie darauf klicken .

Und zweitens, diese Mehrfachauswahl bietet auch die Auswahl durch die Eingabe einer nach unten und verschiedenen Picks mit einem Komma trennen.

Eine weitere coole Sache an Multiselect V11 ist die Live-Suchfunktion, die eine schnelle Recherche direkt aus der Hauptleiste bietet. Außerdem werden die von Ihnen ausgewählten Elemente zur besseren Sichtbarkeit grau.

Weitere Informationen / Demo herunterladen

Multiselect V12

Multiselect V12 versteht es sehr gut, Einfachheit mit Praktikabilität für ein TERRIFISCHES Benutzererlebnis zu kombinieren.

Während sich das kostenlose Tool standardmäßig auf Zustände konzentriert, eignet sich dieses Multiselect-Dropdown mit einer Live-Suchfunktion (durch Komma getrennt) für alles andere.

Sie können es verwenden, um Themen, Elemente, Sprachen auszuwählen, nun, Sie erhalten das Wesentliche – alles funktioniert .

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V13

Ja, Sie können sogar einen Bootstrap-Multiselect für Namen verwenden, genau wie im Fall Multiselect V13. Während dieser kostenlose Ausschnitt dem obigen ziemlich ähnlich ist, ist sein Hauptunterschied die Farbauswahl für die Auswahl.

Dieses hat einen schönen Türkiston. Die Live-Suche, die Trennung von Kommas oder die manuelle Auswahl aus dem Dropdown-Menü sind all die Leckereien, die Multiselect V13 rockt.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V14

Multiselect V14 ist ein tolles kostenloses Snippet für die Länderauswahl. Wenn Sie auf die Leiste klicken, öffnet sich ein Dropdown mit fünfzig Zuständen zur Auswahl.

Während Sie so viele oder so wenig auswählen können, wie Sie möchten, gibt es auch eine QUICK-Schaltfläche „ Alle auswählen “, um die gesamte Liste auszuwählen .

Darüber hinaus erscheinen bis zu vier Namen in der Leiste, aber darüber hinaus zeigt das Widget eine Zahl an. Das Layout passt sich auch sofort an mobile Geräte an .

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V15

Wenn Sie an ähnlichen Bootstrap-Multiselect-Stilen als dem vorherigen interessiert sind, ist Multiselect V15 eine großartige Alternative. Es zeigt fünfzig Zustände in drei Spalten mit ähnlicher Funktionalität an.

Der gleiche Stil bleibt intakt, egal ob auf dem Handy, Tablet oder Desktop. Darüber hinaus verfügt Multiselect V15 über einen Hover-Effekt und färbt ausgewählte Zustände blau und markiert sie mit einem Häkchen.

Sie können auch alles mit einem EINZIGEN Klick auswählen.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V16

Multiselect V16 ist ein weiteres erstklassiges Bootstrap-Multiselect-Widget für die standardmäßige Länderauswahl. Es hält das Design modern und minimalistisch mit ein paar coolen Features.

Grauer Hover-Effekt, Klickanimation, Häkchen und schnelle Tastenkombination zum Auswählen von Elementen nach alphabetischen Zeichen sind die wichtigsten Highlights von Multiselect V16.

Es gibt hier keine Option "Alle auswählen", daher muss der Benutzer alle Auswahlen MANUELL treffen.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V17

Manchmal möchten Sie die Anzahl der Auswahlen, die ein Benutzer treffen kann, BEGRENZEN. In diesem Fall kommt Multiselect V17 ins Spiel. Dieses kostenlose Snippet beschränkt die Auswahl auf sieben, aber Sie können bei Bedarf Änderungen vornehmen.

Darüber hinaus erscheinen die Zustände in der Leiste oben und die Auswahlmöglichkeiten im Dropdown werden grün und sind mit einem Häkchen versehen. Wenn das Limit erreicht ist, ist der Klickeffekt immer noch vorhanden, aber die Auswahl erfolgt nicht.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V18

Multiselect V18 ist ein ziemlich fortschrittliches Bootstrap-Multiselect mit verschiedenen Besonderheiten, die es hervorheben.

Das Wichtigste zuerst: Es enthält Gruppen in der Dropdown-Liste, die die Dinge schön aufschlüsseln, um die Benutzererfahrung zu verbessern. Darüber hinaus hat jede Gruppe eine individuelle Begrenzung der Auswahlmöglichkeiten, wie beim vorherigen Widget.

Diese Mehrfachauswahl ist zwar für sofort einsatzbereite Staaten gedacht, Sie müssen sich jedoch in keiner Weise, Form oder Form einschränken. Nutzen Sie Ihren TOTAL-Vorteil und sparen Sie Zeit.

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V19

Ein einfaches und umfassendes Dropdown-Menü mit Multiselect-Funktion, das Sie jetzt selbst erstellen können, ohne einen Cent auszugeben.

Multiselect V19 eignet sich hervorragend für alle Arten von Auswahlen, da Sie leicht Anpassungen und Verbesserungen vornehmen können, um es Ihren Bedürfnissen anzupassen.

Wenn Sie verschiedene Elemente auswählen, können Sie dies mit dem Mauszeiger aus dem Dropdown-Menü tun oder sogar in die Leiste eingeben und die Eingabetaste drücken. Darüber hinaus wird jede Auswahl ebenfalls grau, Sie können sie jedoch durch Drücken der X-Taste abwählen .

Weitere Informationen / Demo herunterladen

Mehrfachauswahl V20

Um die Dinge auf die nächste Stufe zu bringen, wählen Sie dieses Drei-in-Eins-Bootstrap-Multiselect-Snippet und machen Sie SOFORT einen Unterschied.

Sie können die Dinge bequem in VERSCHIEDENE Kategorien unterteilen und die Anzahl der Artikel, die eine Person auswählen kann, durch die Mehrfachauswahl begrenzen. Die Auswahl erfolgt entweder durch Sammeln von Elementen aus der Dropdown-Liste oder durch Tippen und Drücken der Eingabetaste (Live-Suchfunktion integriert).

Das Widget verwendet auch unterschiedliche Farben für verschiedene Kategorien/Multiselects, die Sie ebenfalls verbessern können.

Weitere Informationen / Demo herunterladen

Jetzt haben Sie mehr über die vielen verschiedenen Bootstrap Multiselect-Plugins und all die Dinge erfahren, die sie für die Funktionalität Ihrer Website tun können.