web-dev-qa-db-fra.com

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

Existe-t-il quelque chose hors de la boîte que bootstrap prend en charge pour afficher une boîte de sélection "normale" dans la liste déroulante defacto? C'est-à-dire, où la liste déroulante est une liste de valeurs et si sélectionné, renseigner le contenu de la liste?

Quelque chose de semblable à cette fonctionnalité?

http://bootstrapformhelpers.com/select/

enter image description here

twitter-bootstrap
206
genxgeek

Bootstrap 3 utilise la classe .form-control 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

425
Baerkins

Une autre option consiste à faire en sorte que la liste déroulante Bootstrap se comporte comme une sélection 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

38
Zim

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%;}
11
Brynner Ferreira

La réponse simple et facile de Skelly est maintenant obsolète avec les modifications apportées à la syntaxe de liste 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>');
});
11
Ben

Une autre option pourrait utiliser bootstrap select . Sur leurs propres mots:

Un choix/multisélection personnalisé pour Bootstrap à l'aide du bouton déroulant, conçu pour se comporter comme un Bootstrapsélectionné.

10
Ariel

Une autre manière sans utiliser le .form-control 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>
5
omabra

Le code de Ben requiert que le div parent ait la classe de groupe de formulaire (j'utilisais btn-group), c'est une version légèrement différente qui recherche simplement 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>');
});
3
Steve Hawkins

Le Bootstrap3 .form-control est cool, mais pour ceux qui aiment ou ont besoin du menu déroulant avec le bouton et l’option ul, voici le code mis à jour. J'ai édité le code par 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;
});
1
Arun

Je me bats actuellement avec des menus déroulants et j'aimerais partager mes expériences:

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

Par exemple, si vous souhaitez créer bootstrap groupes d'entrée, tels que des boutons avec des menus déroulants (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 restitué correctement.

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

Et pour rendre la chose encore plus compliquée, vous ne pouvez pas utiliser aussi simplement $(this).text() pour saisir quel utilisateur a été sélectionné dans la liste déroulante si vous utilisez des icônes de police ou des polices géniales 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 un élément déroulant, ce qui est indésirable.

J'ai trouvé deux solutions possibles:

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

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

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

1
Petr Pánek