web-dev-qa-db-fra.com

Bootstrap 3 sélection déroulante

Nous essayons de ré-implémenter notre formulaire d'inscription avec bootstrap. Notre formulaire d'inscription contient une liste déroulante qui représente un type d'entreprise. J'ai effectué de nombreuses recherches en ligne, mais je ne vois pas d'exemple où une entrée de formulaire serait une liste déroulante.

Bootstrap donne une tonne d'exemples de listes déroulantes liées à diverses actions, mais ce dont j'ai besoin, c'est d'une entrée déroulante. J'ai mis au point deux solutions:

Premier:

<label>Type of Business</label>
<select class="form-control">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
</select>

Il y a un problème ici: bien que la boîte elle-même soit correctement stylée, aucun menu n'est appliqué à la liste déroulante. 

enter image description here

Deuxième version:

<div class="btn-group">
    <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Business type <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">small</a></li>
        <li><a href="#">medium</a></li>
        <li><a href="#">large</a></li>
    </ul>
</div>

Celui-ci a l'air bien:

enter image description here

mais c'est un bouton. Lorsqu'une option est sélectionnée, je ne souhaite effectuer aucune action. Tout ce que je veux, c'est modifier le texte et lier la sélection à un champ de saisie correspondant. 

Ces deux approches semblent être un mauvais choix pour mon action. Je refuse de croire que Bootstrap ne contient pas un simple composant de sélection déroulant lié à un champ de saisie.

Qu'est-ce que je rate ? S'il vous plaît aider.

twitter-bootstrapdrop-down-menutwitter-bootstrap-3
27
AstroSharp

Si vous voulez réaliser ceci , gardez simplement le bouton déroulant et personnalisez-le comme la zone de sélection. Le code est ici et ci-dessous.

.btn {
    cursor: default;
    background-color: #FFF;
    border-radius: 4px;
    text-align: left;
}

.caret {
    position: absolute;
    right: 16px;
    top: 16px;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    background-color: #FFF;    
}

.btn-group.open .dropdown-toggle {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}

.btn-group {width: 100%}
.dropdown-menu {width: 100%;}

Pour que le bouton fonctionne comme une boîte de sélection, il vous suffit d'ajouter ce minuscule code javascript:

$('.dropdown-menu a').on('click', function(){    
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');    
})

Si vous avez plusieurs listes déroulantes personnalisées comme ceci, vous pouvez utiliser ce code javascript:

$('.dropdown-menu a').on('click', function(){    
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
})
22
paulalexandru

Nous venons de passer de notre site à bootstrap 3 et nous avons un tas de formulaires ... ce n’était pas amusant, mais une fois que vous avez terminé, c’est pas mal.

Est-ce ce que vous recherchez? Démo ici

<div class="form-group">
  <label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
  <div class="col-sm-6 col-md-4">
    <select id="company" class="form-control">
      <option>small</option>
      <option>medium</option>
      <option>large</option>
    </select> 
  </div>
</div>
19
Dan

Vous pouvez également ajouter une classe 'active' à l'élément sélectionné.

$('.dropdown').on( 'click', '.dropdown-menu li a', function() { 
   var target = $(this).html();

   //Adds active class to selected item
   $(this).parents('.dropdown-menu').find('li').removeClass('active');
   $(this).parent('li').addClass('active');

   //Displays selected text on dropdown-toggle button
   $(this).parents('.dropdown').find('.dropdown-toggle').html(target + ' <span class="caret"></span>');
});

Voir le exemple jsfiddle

11
Nathalia Xavier

Je cherchais depuis quelques temps un menu déroulant sélectionné de Nice et j’en ai trouvé un bon. Alors je vais le laisser ici. C'est ce qu'on appelle bootsrap-select

voici le lien. Vérifiez-le. il comporte des listes déroulantes modifiables, des listes déroulantes et bien plus encore. Et c'est un jeu d'enfant à ajouter à votre projet.

Si le lien disparaît, il suffit de rechercher bootstrap-select à l'aide de silviomoreto.github.io. C'est mieux parce que c'est une balise de sélection normale 

4
Gokigooooks

Je voudrais élargir la réponse de paulalexandru et mettre ici une solution complète qui fonctionne généralement avec des menus déroulants de démarrage et mettant à jour le contenu du bouton principal ainsi que la valeur de l'option sélectionnée.

La liste déroulante de bootstrap est définie comme suit:

<div class="btn-group" role="group">
  <button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
    Option 1 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" data-value="1">Option 1</a></li>
    <li><a href="#" data-value="2">Option 2</a></li>
    <li><a href="#" data-value="3">Option 3</a></li>
  </ul>
</div>

En plus du code déroulant d'amorçage standard, l'attribut data-value permet de stocker les valeurs dans chaque option de liste déroulante (dans l'élément <a>).

Maintenant, le code JS . J'ai créé une fonction qui gère les menus déroulants:

function dropdownToggle() {
    // select the main dropdown button element
    var dropdown = $(this).parent().parent().prev();

    // change the CONTENT of the button based on the content of selected option
    dropdown.html($(this).html() + '&nbsp;</i><span class="caret"></span>');

    // change the VALUE of the button based on the data-value property of selected option
    dropdown.val($(this).prop('data-value'));
}

Et bien sûr, nous devons ajouter un écouteur d'événement:

$(document).ready(function(){
    $('.dropdown-menu a').on('click', dropdownToggle);
}
3
Petr Pánek

La liste déroulante apparaissant ainsi dépend de la nature de votre navigateur, car il n’est pas possible d’en changer le style pour certains. Il semblerait que le vôtre soit IE9, mais il serait très différent sous Chrome.

Vous pourriez utiliser quelque chose comme ceci:

http://silviomoreto.github.io/bootstrap-select/

Ce qui rendra vos sélections plus cohérentes entre navigateurs.

1
Paddy

Essaye ça: 

<div class="form-group">
     <label class="control-label" for="Company">Company</label>
     <select id="Company" class="form-control" name="Company">
         <option value="small">small</option>
         <option value="medium">medium</option>
         <option value="large">large</option>
     </select> 
 </div>
0
domini ccqque
;(function ($) {
    $.fn.bootselect = function (options) {
        this.each(function () {
            var os = jQuery(this).find('option');
            var parent = this.parentElement;
            var css = jQuery(this).attr('class').split('input').join('btn').split('form-control').join('');
            var vHtml = jQuery(this).find('option[value="' + jQuery(this).val() + '"]').html();
            var html = '<div class="btn-group" role="group">' + '<button type="button" data-toggle="dropdown" value="1" class="btn btn-default ' + css + ' dropdown-toggle">' +
                vHtml + '<span class="caret"></span>' + '</button>' + '<ul class="dropdown-menu">';
            var i = 0;
            while (i < os.length) {
                html += '<li><a href="#" data-value="' + jQuery(os[i]).val() + '" html-attr="' + jQuery(os[i]).html() + '">' + jQuery(os[i]).html() + '</a></li>';
                i++;
            }
            html += '</ul>' + '</div>';
            var that = this;
            jQuery(parent).append(html);
            jQuery(parent).find('ul.dropdown-menu > li > a').on('click', function () {
                jQuery(parent).find('button.btn').html(jQuery(this).html() + '<span class="caret"></span>');
                jQuery(that).find('option[value="' + jQuery(this).attr('data-value') + '"]')[0].selected = true;
                jQuery(that).trigger('change');
            });
            jQuery(this).hide();
        });
    };
}(jQuery));


jQuery('.bootstrap-select').bootselect();
0
Amit Talbot