¿Cómo puedo representar un cuadro de selección de lista (desplegable) con bootstrap?

¿Hay algo fuera de la caja que bootstrap admite para representar un cuadro de selección de lista desplegable de hecho "regular"? Es decir, ¿dónde el cuadro desplegable es una lista de valores y, si se selecciona, completa el contenido del cuadro de lista?

Algo similar a esta funcionalidad?

http://bootstrapformhelpers.com/select/

Bootstrap 3 usa la .form-controlclase para diseñar componentes de formulario.

<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

Otra opción es hacer que el menú desplegable Bootstrap se comporte como una selección usando 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

La respuesta agradable y fácil de Skelly ahora está desactualizada con los cambios en la sintaxis desplegable en Bootstap. En su lugar use esto:

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

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

Otra opción podría ser usar bootstrap select . En sus propias palabras:

Una selección / selección múltiple personalizada para Bootstrap usando el menú desplegable de botones, diseñado para comportarse como las selecciones de Bootstrap normales.

Otra forma sin usar .form-control es esta:

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

El código de Ben requiere que el div padre tenga la clase form-group (estaba usando btn-group), esta es una versión ligeramente diferente que solo busca el div más cercano e incluso puede ser un poco más 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>');
});

Bootstrap3 .form-controles genial, pero para aquellos que aman o necesitan el menú desplegable con la opción de botón y ul, aquí está el código actualizado. Edité el código de Steve para corregir el salto al enlace hash y cerrar el menú desplegable después de la selección.

Gracias a Steve, Ben y 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;
});

Actualmente estoy luchando con menús desplegables y me gustaría compartir mis experiencias:

Hay situaciones específicas donde <select> que no se pueden usar y deben 'emularse' con el menú desplegable.

Por ejemplo, si desea crear grupos de entrada de bootstrap, como botones con menús desplegables (consulte http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Lamentablemente <select>no es compatible con los grupos de entrada, no se representará correctamente.

¿O alguien ya ha resuelto esto? Estaría muy interesado en la solución.

Y para hacerlo aún más complicado, no puede usarlo simplemente $(this).text()para capturar lo que el usuario seleccionó en el menú desplegable si está usando glypicons o iconos de fuentes increíbles como contenido para el menú desplegable. Por ejemplo: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> porque en este caso no hay texto y si va a agregar algo, también se mostrará en el elemento desplegable y esto no es deseado.

Encontré dos posibles soluciones:

1) Use $(this).html()para obtener contenido del <li>elemento seleccionado y luego para examinarlo, pero obtendrá algo así, <a href="#0"><i class="fa fa-minus"></i></a>por lo que debe jugar con esto para extraer lo que necesita.

2) Uso $(this).text()y ocultar el texto en el elemento de lapso oculta: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Para mí, esta es una solución simple y elegante, puede poner cualquier texto que necesite, el texto estará oculto y no necesita hacer ninguna transformación del $(this).html()resultado como en la opción 1) para obtener lo que necesita.

Espero que esté claro y pueda ayudar a alguien :-)