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

Inną opcją jest, aby rozwijane menu Bootstrap zachowywało się jak select przy użyciu 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

Miła i łatwa odpowiedź Skelly ' ego jest teraz nieaktualna ze zmianami składni rozwijanej w Bootstapie. 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 Bootstrap select. Na własne słowa:

Niestandardowe select / multiselect dla Bootstrap za pomocą rozwijanego przycisku, zaprojektowane tak, aby zachowywać się jak zwykłe selekcje Bootstrap.

Inny sposób bez użycia .form-control jest taki:

  $(".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 rodzic div miał klasę form-group (używałem btn-group), jest to nieco inna wersja, która po prostu wyszukuje najbliższy 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-control jest fajny, ale dla tych, którzy kochają lub potrzebują rozwijanego przycisku i opcji ul, oto zaktualizowany kod. Edytowałem Kod przez Steve ' a, aby naprawić przeskakiwanie do łącza hashowego i zamykanie rozwijanej listy po zaznaczeniu.

$(".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 spadkami i chciałbym podzielić się swoimi doświadczeniami:

Istnieją szczególne sytuacje, w których <select> nie może być używany i musi być "emulowany"z rozwijanym menu.

Na przykład, jeśli chcesz utworzyć grupy wejściowe bootstrap, takie jak przyciski z rozwijanymi (patrz http://getbootstrap.com/components/#input-groups-buttons-dropdowns). niestety <select> nie jest wspierane w grupach wejściowych, nie będzie renderowane poprawnie.

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

I aby było jeszcze bardziej skomplikowane, nie możesz użyć tak po prostu $(this).text(), aby złapać użytkownika wybranego w rozwijanym menu, jeśli używasz glipicons lub font awesome icons jako zawartości do rozwijanego menu. Na przykład: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Ponieważ w tym przypadku nie ma tekstu i jeśli dodasz trochę to będzie również wyświetlany w rozwijanym elemencie i jest to niechciane.

Znalazłem dwa możliwe rozwiązania:

1) Użyj $(this).html(), Aby uzyskać zawartość wybranego elementu <li>, a następnie go zbadać, ale otrzymasz coś w rodzaju <a href="#0"><i class="fa fa-minus"></i></a>, więc musisz grać z tym, aby wyodrębnić to, czego potrzebujesz.

2) Użyj $(this).text() i ukryj tekst w elemencie w ukrytej 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 tekst, tekst będzie ukryty i nie musisz robić żadnych przekształceń wyniku $(this).html(), jak w opcji 1), Aby uzyskać to, czego potrzebujesz.

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