Come posso visualizzare una casella di selezione elenco (elenco a discesa) con bootstrap?

C'è qualcosa fuori dalla scatola che bootstrap supporta per rendere un "normale" defacto casella di selezione dell'elenco a discesa? Cioè, dove la casella a discesa è un elenco di valori e se selezionato popola il contenuto della casella di riepilogo?

Qualcosa di simile a questa funzionalità?

http://bootstrapformhelpers.com/select/

Bootstrap 3 utilizza la .form-controlclasse per definire lo stile dei componenti del modulo.

<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

Un'altra opzione è fare in modo che il menu a discesa Bootstrap si comporti come una selezione 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 risposta semplice e piacevole di Skelly è ora obsoleta con le modifiche alla sintassi del menu a discesa in Bootstap. Invece usa questo:

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

Un'altra opzione potrebbe essere quella di utilizzare bootstrap select . Con le loro stesse parole:

Una selezione / selezione multipla personalizzata per Bootstrap utilizzando il menu a discesa dei pulsanti, progettato per comportarsi come il normale Bootstrap seleziona.

Un altro modo senza usare il controllo .form è questo:

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

Il codice di Ben richiede che il div parent abbia la classe form-group (stavo usando btn-group), questa è una versione leggermente diversa che cerca solo il div più vicino e potrebbe anche essere un po 'più veloce.

$(".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è interessante, ma per chi ama o ha bisogno del menu a discesa con pulsante e opzione ul, ecco il codice aggiornato. Ho modificato il codice di Steve per correggere saltando al collegamento hash e chiudendo il menu a discesa dopo la selezione.

Grazie 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;
});

Attualmente sto combattendo con gli elenchi a discesa e vorrei condividere le mie esperienze:

Esistono situazioni specifiche in cui <select>non possono essere utilizzate e devono essere "emulate" con il menu a discesa.

Ad esempio, se si desidera creare gruppi di input bootstrap, come Pulsanti con menu a discesa (consultare http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Sfortunatamente <select>non è supportato nei gruppi di input, non verrà reso correttamente.

O qualcuno lo ha già risolto? Sarei molto interessato alla soluzione.

E per renderlo ancora più complicato, non puoi usare così semplicemente $(this).text()per catturare quale utente selezionato nel menu a discesa se stai usando glypicons o icone fantastiche di font come contenuto per il menu a discesa. Ad esempio: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> poiché in questo caso non è presente alcun testo e se ne aggiungerai alcuni verrà visualizzato anche nell'elemento a discesa e ciò è indesiderato.

Ho trovato due possibili soluzioni:

1) Usa $(this).html()per ottenere il contenuto <li>dell'elemento selezionato e poi per esaminarlo, ma otterrai qualcosa del genere, <a href="#0"><i class="fa fa-minus"></i></a>quindi devi giocare con questo per estrarre ciò di cui hai bisogno.

2) Uso $(this).text()e nascondere il testo in elemento arco nascosto: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Per me questa è una soluzione semplice ed elegante, puoi mettere tutto il testo che ti serve, il testo sarà nascosto e non dovrai fare alcuna trasformazione del $(this).html()risultato come nell'opzione 1) per ottenere ciò di cui hai bisogno.

Spero sia chiaro e possa aiutare qualcuno :-)