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

Bootstrap 3 utilise le .form-control pour styliser les composants du 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

Answer 2

Vous pouvez faire une sélection bootstrap en utilisant le composant Dropdown...

Bootstrap 5 (mise à jour 2021)

<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#" id="selectA">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
     <li class="dropdown-item"><a href="#">Item I</a></li>
     <li class="dropdown-item"><a href="#">Item II</a></li>
     <li class="dropdown-item"><a href="#">Item III</a></li>
     <li class="dropdown-item"><a href="#">Item IV</a></li>
</ul>

let links = document.querySelectorAll('.dropdown-item')
links.forEach(element => element.addEventListener("click", function () {
    let text = element.innerText
    document.getElementById('selectA').innerText = text
}))

Bootstrap 5

Réponse originale (Bootstrap 3)

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

Bootstrap 3

Answer 3

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%;}

Answer 4

La réponse simple et facile de Skelly est maintenant dépassée avec les changements apportés à la syntaxe des listes déroulantes 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>');
});

Answer 5

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

Une sélection / multi-sélection personnalisée pour Bootstrap utilisant un bouton dropdown, conçue pour se comporter comme les sélections Bootstrap ordinaires.