Wie kann ich mit Bootstrap ein Listenauswahlfeld (Dropdown) rendern?

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?

http://bootstrapformhelpers.com/select/

Bootstrap 3 verwendet die .form-controlKlasse, um Formularkomponenten zu formatieren.

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

http://getbootstrap.com/css/#forms-controls

Eine andere Möglichkeit besteht darin, das Bootstrap-Dropdown mit jQuery wie eine Auswahl zu verhalten ...

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

http://www.bootply.com/b4NKREUPkN

Skellys nette und einfache Antwort ist jetzt mit den Änderungen an der Dropdown-Syntax in Bootstap veraltet. Verwenden Sie stattdessen Folgendes:

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>');
});

Test: http://jsfiddle.net/brynner/hkwhaqsj/6/

HTML

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
    <ul class="dropdown-menu option" role="menu">
        <li id="1"><a href="#">One</a></li>
        <li id="2"><a href="#">Two</a></li>
    </ul>
</div>

jQuery

$('body').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(v);
});

CSS

.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}

Eine andere Option könnte die Verwendung von Bootstrap Select sein . Auf eigene Faust:

Eine benutzerdefinierte Auswahl / Mehrfachauswahl für Bootstrap mithilfe der Schaltflächen-Dropdown-Liste, die sich wie normale Bootstrap-Auswahlen verhält.

Ein anderer Weg ohne die .form-Steuerung ist folgender:

  $(".dropdown-menu li a").click(function(){
        $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
        $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
      });

$(".dropdown-menu li a").click(function(){
  $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".btn-group").find('.btn').val($(this).data('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="btn-group">
  <button  type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Test <span class="caret"> </span>
  </button>
  <ul class="dropdown-menu">
    <li><a href='#'>test 1</a></li>
    <li><a href='#'>test 2</a></li>
    <li><a href='#'>test 3</a></li>
  </ul>
</div>

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.

$(".dropdown-menu li a").click(function(){
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});

Der Bootstrap3 .form-controlist 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!

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
    $(this).closest('.dropdown').removeClass("open");
    return false;
});

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 :-)