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

Une autre option consiste à faire en sorte que la liste déroulante Bootstrap se comporte comme une sélection en utilisant 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 maintenant 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 utiliser Bootstrap select . Sur leurs propres mots:

Une sélection / Sélection multiple personnalisée pour Bootstrap à l'aide de la liste déroulante button, conçue pour se comporter comme des sélections de Bootstrap régulières.

Une autre façon sans utiliser le .le contrôle de formulaire est le suivant:

  $(".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 exige que le div parent ait la classe form-group (j'utilisais btn-group), c'est une version légèrement différente qui recherche simplement la div la 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>');
});

Le Bootstrap3 .form-control est cool mais pour ceux qui aiment ou ont besoin de la liste déroulante avec bouton et option ul, voici le code mis à jour. J'ai édité le code par Steve pour corriger le saut au lien de hachage et la fermeture de la liste déroulante 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 j'aimerais partager mes expériences:

Il existe des situations spécifiques où <select> ne peut pas être utilisé et doit être "émulé" avec la liste déroulante.

Par exemple, si vous voulez 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, <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 résolu cela déjà? Je serais très intéressé par la solution.

Et pour le rendre encore plus compliqué, vous ne pouvez pas utiliser si simplement $(this).text() pour attraper quel utilisateur sélectionné dans la liste déroulante si vous utilisez des glypicons ou des icônes de police impressionnantes comme contenu pour la liste déroulante. 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 désiré.

, j'ai trouvé deux solutions possibles:

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

2) Utilisez $(this).text() et masquez le texte dans l'élément dans 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 :-)