Comment puis-je rendre une zone de sélection de liste (liste déroulante) avec bootstrap?

Y a-t-il quelque chose hors de la boîte que le bootstrap prend en charge pour rendre une boîte de sélection de liste déroulante par défaut "régulière"? Autrement dit, où la zone de liste déroulante est une liste de valeurs et si elle est sélectionnée, remplir le contenu de la zone de liste?

Quelque chose de similaire à cette fonctionnalité?

http://bootstrapformhelpers.com/select/

Bootstrap 3 utilise la .form-controlclasse pour styliser les composants de formulaire.

<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

Une autre option consiste à faire en sorte que la liste déroulante Bootstrap se comporte comme une sélection à l'aide de 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 réponse agréable et facile de Skelly est désormais obsolète avec les modifications apportées à la syntaxe déroulante dans Bootstap. Utilisez plutôt ceci:

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

Une autre option pourrait être d'utiliser bootstrap select . Selon leurs propres mots:

Une sélection / multisélection personnalisée pour Bootstrap à l'aide de la liste déroulante des boutons, conçue pour se comporter comme des sélections Bootstrap normales.

Une autre façon sans utiliser le contrôle .form est la suivante:

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

Le code de Ben nécessite que le div parent ait la classe form-group (j'utilisais btn-group), c'est une version légèrement différente qui recherche juste le div le plus proche et peut même être un peu plus rapide.

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

The Bootstrap3 .form-control est cool mais pour ceux qui aiment ou ont besoin du menu déroulant avec bouton et option ul, voici le code mis à jour. J'ai édité le code de Steve pour corriger le saut vers le lien de hachage et la fermeture du menu déroulant après la sélection.

Merci à Steve, Ben et 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;
});

Je me bats actuellement avec des listes déroulantes et je voudrais partager mes expériences:

Il existe des situations spécifiques où <select> ne peuvent pas être utilisées et doivent être «émulées» avec la liste déroulante.

Par exemple, si vous souhaitez créer des groupes d'entrée bootstrap, comme des boutons avec des listes déroulantes (voir http://getbootstrap.com/components/#input-groups-buttons-dropdowns ). Malheureusement, il <select>n'est pas pris en charge dans les groupes d'entrée, il ne sera pas rendu correctement.

Ou est-ce que quelqu'un a déjà résolu cela? Je serais très intéressé par la solution.

Et pour le rendre encore plus compliqué, vous ne pouvez pas utiliser simplement $(this).text()pour attraper quel utilisateur sélectionné dans la liste déroulante si vous utilisez des glypicons ou des icônes impressionnantes de police comme contenu pour la liste déroulante. Par exemple: <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> Parce que dans ce cas, il n'y a pas de texte et si vous en ajoutez, il sera également affiché dans l'élément déroulant et ce n'est pas souhaité.

J'ai trouvé deux solutions possibles:

1) Utilisez $(this).html()pour obtenir le contenu de l' <li>élément sélectionné , puis pour l'examiner, mais vous obtiendrez quelque chose comme <a href="#0"><i class="fa fa-minus"></i></a>ça, vous devez donc jouer avec cela pour extraire ce dont vous avez besoin.

2) Utiliser $(this).text()et masquer le texte dans l' élément de la durée cachée: <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>. Pour moi, c'est une solution simple et élégante, vous pouvez mettre n'importe quel texte dont vous avez besoin, le texte sera caché, et vous n'avez pas besoin de faire de transformations de $(this).html()résultat comme dans l'option 1) pour obtenir ce dont vous avez besoin.

J'espère que c'est clair et peut aider quelqu'un :-)