Jak mogę wyrenderować pole wyboru listy (menu rozwijane) za pomocą bootstrap?

Czy jest coś z pudełka, co obsługuje bootstrap, aby renderować „standardowe” pole wyboru listy rozwijanej defacto? To znaczy, gdzie w rozwijanym polu znajduje się lista wartości, a jeśli wybrano, wypełnij zawartość pola listy?

Coś podobnego do tej funkcjonalności?

http://bootstrapformhelpers.com/select/

Bootstrap 3 wykorzystuje .form-controlklasę do stylowania komponentów formularza.

<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

Inną opcją jest sprawienie, aby rozwijane menu Bootstrap zachowywało się jak zaznaczenie za pomocą jQuery ...

$(".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

Ładna i łatwa odpowiedź Skelly jest teraz nieaktualna wraz ze zmianami w składni rozwijanej w Bootstap. Zamiast tego użyj tego:

$(".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%;}

Inną opcją może być użycie wyboru bootstrap . Własnymi słowami:

Niestandardowy wybór / wybór wielokrotny dla Bootstrap za pomocą menu rozwijanego przycisku, zaprojektowany tak, aby zachowywał się jak zwykłe selekcje Bootstrap.

Innym sposobem bez korzystania z .form-control jest:

  $(".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>

Kod Bena wymaga, aby div nadrzędny miał klasę form-group (użyłem btn-group), jest to nieco inna wersja, która szuka najbliższego div i może być nawet nieco szybsza.

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

Bootstrap3 .form-controljest fajny, ale dla tych, którzy kochają lub potrzebują rozwijanego menu z opcją przycisku i ul, oto zaktualizowany kod. Edytowałem kod przez Steve'a, aby naprawić przeskakiwanie do linku mieszającego i zamykanie menu rozwijanego po zaznaczeniu.

Dzięki Steve, Ben i 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;
});

Obecnie walczę z listami rozwijanymi i chciałbym podzielić się swoimi doświadczeniami:

Istnieją szczególne sytuacje, w których <select>nie można ich użyć i należy je „emulować” za pomocą menu rozwijanego.

Na przykład, jeśli chcesz utworzyć grupy wejściowe ładowania początkowego, takie jak Przyciski z listami rozwijanymi (patrz http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Niestety <select>nie jest obsługiwany w grupach wejściowych, nie będzie poprawnie renderowany.

Czy ktoś już to rozwiązał? Byłbym bardzo zainteresowany rozwiązaniem.

I aby uczynić to jeszcze bardziej skomplikowanym, nie możesz użyć tak po prostu, $(this).text()aby złapać tego, który użytkownik wybrał w menu rozwijanym, jeśli używasz glypiconów lub czcionek niesamowite ikony jako zawartość do rozwijania. Na przykład: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Ponieważ w tym przypadku nie ma tekstu, a jeśli go dodasz, zostanie on również wyświetlony w rozwijanym elemencie i jest to niepożądane.

Znalazłem dwa możliwe rozwiązania:

1) Użyj, $(this).html()aby uzyskać zawartość wybranego <li>elementu, a następnie ją zbadać, ale dostaniesz coś takiego, <a href="#0"><i class="fa fa-minus"></i></a>więc musisz się tym pobawić, aby wyodrębnić to, czego potrzebujesz.

2) Wykorzystanie $(this).text()i ukryć tekst w elemencie w ukrytym rozpiętości: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Dla mnie jest to proste i eleganckie rozwiązanie, możesz umieścić dowolny potrzebny tekst, tekst zostanie ukryty i nie musisz wykonywać żadnych transformacji $(this).html()wyniku, jak w opcji 1), aby uzyskać to, czego potrzebujesz.

Mam nadzieję, że to jasne i może komuś pomóc :-)