Gibt es etwas, das Bootstrap unterstützt, um ein "normales" Auswahlfeld für die Dropdown-Liste "defacto" zu rendern? Das heißt, wo das Dropdown-Feld eine Liste von Werten ist und wenn ausgewählt, den Inhalt des Listenfelds füllen?
Ähnliches zu dieser Funktionalität?
twitter-bootstrap
Genxgeek
quelle
quelle
<select>
. Während Bootstrap<ul>
für Dropdowns verwendet wird, ist dies letztendlich eine irreführende Verwendung dieses Tags. Angesichts des ganzen JQuery-Pomps im Bootstrap frage ich mich, warum sie das Caret nicht geändert haben, um sich selbst auszuwählen. Das scheint eine weitaus anmutigere Lösung zu sein als eine Veruntreuungul
.Antworten:
Bootstrap 3 verwendet die
.form-control
Klasse, um Formularkomponenten zu formatieren.http://getbootstrap.com/css/#forms-controls
quelle
bootstrap.js
. Der wesentliche visuelle Unterschied zwischen dieser und der "vollständigen" Bootstrap-Lösung (von @JonathanEdwards angedeutet) besteht darin, dass das angezeigte Menü kastenförmig und weniger hübsch ist, wie diealert
Box, die Ihr Browser bereitstellt. Kleines Problem wirklich. Der nicht angeklickte Selektor sieht jedoch genauso aus wie ein Bootstrap-Selektor.Eine andere Möglichkeit besteht darin, das Bootstrap-Dropdown mit jQuery wie eine Auswahl zu verhalten ...
http://www.bootply.com/b4NKREUPkN
quelle
Skellys nette und einfache Antwort ist jetzt mit den Änderungen an der Dropdown-Syntax in Bootstap veraltet. Verwenden Sie stattdessen Folgendes:
quelle
Test: http://jsfiddle.net/brynner/hkwhaqsj/6/
HTML
jQuery
CSS
quelle
Eine andere Option könnte die Verwendung von Bootstrap Select sein . Auf eigene Faust:
quelle
Ein anderer Weg ohne die .form-Steuerung ist folgender:
quelle
Bens Code erfordert, dass das übergeordnete Div die Form-Group-Klasse hat (ich habe btn-group verwendet). Dies ist eine etwas andere Version, die nur nach dem nächsten Div sucht und möglicherweise sogar etwas schneller ist.
quelle
Der Bootstrap3
.form-control
ist cool, aber für diejenigen, die das Dropdown-Menü mit Button und ul lieben oder brauchen, ist hier der aktualisierte Code. Ich habe den Code von Steve bearbeitet, um das Springen zum Hash-Link und das Schließen des Dropdowns nach der Auswahl zu korrigieren.Danke an Steve, Ben und Skelly!
quelle
Ich kämpfe derzeit mit Dropdowns und möchte meine Erfahrungen teilen:
Es gibt bestimmte Situationen, in denen
<select>
keine Verwendung möglich ist und die mit Dropdown-Liste "emuliert" werden müssen.Wenn Sie beispielsweise Bootstrap-Eingabegruppen erstellen möchten, z. B. Schaltflächen mit Dropdowns (siehe http://getbootstrap.com/components/#input-groups-buttons-dropdowns ).
<select>
Wird in Eingabegruppen leider nicht unterstützt, wird es nicht richtig gerendert.Oder hat das schon jemand gelöst? Die Lösung würde mich sehr interessieren.
Und um es noch komplizierter zu machen, können Sie nicht einfach verwenden
$(this).text()
, um den in der Dropdown-Liste ausgewählten Benutzer zu erfassen, wenn Sie Glypicons oder fantastische Symbole als Inhalt für die Dropdown-Liste verwenden. Beispiel:<li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>
Da in diesem Fall kein Text vorhanden ist und Sie einen Text hinzufügen, wird dieser auch im Dropdown-Element angezeigt. Dies ist unerwünscht.Ich habe zwei mögliche Lösungen gefunden:
1) Verwenden Sie
$(this).html()
diese Option , um den Inhalt des ausgewählten<li>
Elements abzurufen und anschließend zu untersuchen. Sie erhalten jedoch so etwas wie etwas,<a href="#0"><i class="fa fa-minus"></i></a>
sodass Sie damit spielen müssen, um das zu extrahieren, was Sie benötigen.2) Verwenden
$(this).text()
und verbergen Sie den Text im Element in ausgeblendeter Spanne :<li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>
. Für mich ist dies eine einfache und elegante Lösung. Sie können jeden gewünschten Text einfügen, der Text wird ausgeblendet und Sie müssen keine Transformationen des$(this).html()
Ergebnisses wie in Option 1) durchführen, um das zu erhalten, was Sie benötigen.Ich hoffe es ist klar und kann jemandem helfen :-)
quelle