Comment rendre une boîte de sélection de liste (dropdown) avec bootstrap ?

Question

Existe-t-il quelque chose de prêt à l'emploi que bootstrap prend en charge pour rendre une boîte de sélection de liste déroulante défacto " normale " ? C'est-à-dire que la zone de liste déroulante est une liste de valeurs qui, si elle est sélectionnée, remplit le contenu de la zone de liste ?

Quelque chose de similaire à cette fonctionnalité ?

http://bootstrapformhelpers.com/select/

Answer 1

Une autre façon de procéder sans utiliser le contrôle de formulaire 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>

Answer 2

Le code de Ben nécessite que la div parente ait la classe form-group (j'utilisais btn-group), ceci 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>');
});

Answer 3

Le Bootstrap3 .form-control est cool mais pour ceux qui aiment ou ont besoin du drop-down avec bouton et option ul, voici le code mis à jour. J'ai modifié le code de Steve pour corriger le saut vers le lien dièse et la fermeture de la liste déroulante après 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;
});

Answer 4

Je me bats actuellement avec les listes déroulantes et j'aimerais partager mon expérience :

Il existe des situations spécifiques où <select> ne peut pas être utilisé et doit être "émulé" avec une 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 de saisie, il ne sera pas rendu correctement.

Ou bien quelqu'un a-t-il déjà résolu ce problème ? Je serais très intéressé par la solution.

Et pour rendre les choses encore plus compliquées, vous ne pouvez pas utiliser aussi simplement $(this).text() pour récupérer ce que l'utilisateur a sélectionné dans la liste déroulante si vous utilisez des glypicônes ou des icônes "font awesome" comme contenu pour la liste déroulante. Par exemple : <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li> En effet, dans ce cas, il n'y a pas de texte et si vous en ajoutez, il sera également affiché dans l'élément de la liste déroulante, ce qui est indésirable.

J'ai trouvé deux solutions possibles :

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

2) Utilisez $(this).text() et cacher le texte de l'élément dans le span caché : <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 l'image. $(this).html() résultat comme dans l'option 1) pour obtenir ce dont vous avez besoin.

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