Como renderizar uma caixa de seleção de lista (suspensa) com bootstrap?

Existe algo fora da caixa que o bootstrap suporta para renderizar uma caixa de seleção da lista suspensa padrão "regular"? Ou seja, onde a caixa suspensa é uma lista de valores e, se selecionada, preenche o conteúdo da caixa de listagem?

Algo semelhante a esta funcionalidade?

http://bootstrapformhelpers.com/select/

O Bootstrap 3 usa a .form-controlclasse para estilizar os componentes do formulário.

<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

Outra opção é fazer com que o menu suspenso Bootstrap se comporte como um select usando o 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

A resposta fácil e agradável de Skelly agora está desatualizada com as alterações na sintaxe suspensa no Bootstap. Em vez disso, use o seguinte:

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

Teste: 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%;}

Outra opção pode estar usando o bootstrap select . Em suas próprias palavras:

Uma seleção / seleção múltipla personalizada para o Bootstrap usando o menu suspenso de botões, projetado para se comportar como as seleções regulares do Bootstrap.

Outra maneira sem usar o controle .form é o seguinte:

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

O código de Ben exige que o div pai tenha a classe de grupo de formulários (eu estava usando o grupo btn), esta é uma versão ligeiramente diferente que apenas procura pelo div mais próximo e pode até ser um pouco mais rápido.

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

O Bootstrap3 .form-controlé legal, mas para quem gosta ou precisa do menu suspenso com o botão e a opção ul, aqui está o código atualizado. Editei o código por Steve para corrigir o salto para o link de hash e fechar o menu suspenso após a seleção.

Graças a Steve, Ben e 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;
});

Atualmente, estou lutando com listas suspensas e gostaria de compartilhar minhas experiências:

Existem situações específicas em que <select> não podem ser usadas e devem ser 'emuladas' com o menu suspenso.

Por exemplo, se você deseja criar grupos de entrada de inicialização, como Botões com menus suspensos (consulte http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Infelizmente <select>não é suportado em grupos de entrada, não será renderizado corretamente.

Ou alguém já resolveu isso? Eu ficaria muito interessado na solução.

E para torná-lo ainda mais complicado, você não pode usar tão simplesmente $(this).text()para capturar o usuário selecionado no menu suspenso se estiver usando glypicons ou ícones impressionantes de fontes como conteúdo para o menu suspenso. Por exemplo: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> como neste caso não há texto e, se você adicionar algum texto, ele também será exibido no elemento suspenso e isso é indesejável.

Encontrei duas soluções possíveis:

1) Use $(this).html()para obter o conteúdo do <li>elemento selecionado e, em seguida, examiná-lo, mas você terá algo parecido <a href="#0"><i class="fa fa-minus"></i></a>com o que precisa, para jogar com ele para extrair o que precisa.

2) Use $(this).text()e ocultar o texto no elemento no espaço oculto: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Para mim, esta é uma solução simples e elegante, você pode colocar qualquer texto que precisar, o texto ficará oculto e não precisará fazer nenhuma transformação de $(this).html()resultado, como na opção 1) para obter o que precisa.

Espero que esteja claro e possa ajudar alguém :-)