Bootstrap 3 liste déroulante Sélectionner

Nous venons de changer notre site pour bootstrap 3 et nous avons un tas de formulaires...n'était pas amusant, mais une fois que vous obtenez le coup c'est pas trop 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>

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 l'exemple jsfiddle

J'ai cherché une belle liste déroulante de sélection depuis un certain temps maintenant et j'en ai trouvé une bonne. Donc je vais juste le laisser ici. Il est appelé bootsrap-select

Voici le lien. check it out. il a des listes déroulantes modifiables, des listes déroulantes combo et plus encore. Et c'est un jeu d'enfant à ajouter à votre projet.

Si le lien meurt, recherchez simplement bootstrap-sélectionnez par silviomoreto.github.io. C'est mieux parce que c'est une balise select normale

Je voudrais étendre la réponse de paulalexandru et mettre ici une solution complète qui fonctionne généralement avec les listes déroulantes bootstrap et la mise à jour du contenu du bouton principal et aussi la valeur de l'option sélectionnée.

La liste déroulante 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 Bootstrap standard, il existe un attribut data-value pour stocker les valeurs dans chaque option de liste déroulante (dans l'élément <a>).

Maintenant le code JS. J'ai crated fonction qui gère le liste déroulante:

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

La liste déroulante qui apparaît comme ça dépend de ce que votre navigateur est, car il n'est pas possible de styliser cela pour certains. Il semble que le vôtre est IE9, mais aurait l'air tout à fait différent dans Chrome.

Vous pouvez chercher à utiliser quelque chose comme ceci:

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

Ce qui rendra vos selectboxes plus cohérents entre les navigateurs.

Essayez ceci:

<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>