Comment faire pour Afficher l'Élément Sélectionné dans le Bootstrap Bouton Déroulant Titre

Question

Je suis en utilisant le bootstrap élément Déroulant à ma demande et c'est comme:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
   </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Item I</a></li>
   <li><a tabindex="-1" href="#">Item II</a></li>
   <li><a tabindex="-1" href="#">Item III</a></li>
   <li class="divider"></li>
   <li><a tabindex="-1" href="#">Other</a></li>
 </ul>
</div>

maintenant, je voudrais afficher l'élément sélectionné comme le btn légende.Comme vous pouvez le voir il est codée en dur par "s'il vous Plaît Sélectionner dans la Liste" mais comment je peux afficher l'Élément sélectionné à la place de celui de la btn à l'aide de jquery? Je sais que je peux changer le titre en utilisant le .html() ou .texte() la méthode mais je ne sais pas comment faire pour saisir la valeur sélectionnée de la liste? Pouvez-vous svp m'aider à comprendre cela? Merci pour votre aide

Answer 1

Que j'ai compris votre problème est que vous voulez changer le texte du bouton avec le clic de texte liées, si oui, vous pouvez essayer celui-ci: http://jsbin.com/owuyix/4/edit

 $(function(){

    $(".dropdown-menu li a").click(function(){

      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());

   });

});

---

Selon votre commentaire:

cela ne fonctionne pas pour moi quand j'ai des listes de l'élément <li> peuplées par appel ajax.

donc, vous avez à déléguer l'événement le plus proche de chez statique parent avec .on() méthode jQuery:

 $(function(){

    $(".dropdown-menu").on('click', 'li a', function(){
      $(".btn:first-child").text($(this).text());
      $(".btn:first-child").val($(this).text());
   });

});

Ici, l'événement est délégué à la statique parent $(".dropdown-menu"), bien que vous pouvez déléguer l'événement à l' $(document) aussi parce qu'il est toujours disponible.

Answer 2

Mise à jour pour Bootstrap 3;

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).text());
});

Si vous voulez avoir la "valeur" être différent du "texte":

JS:

$(".dropdown-menu li a").click(function(){
  $(this).parents(".input-group-btn").find('.btn').text($(this).text());
  $(this).parents(".input-group-btn").find('.btn').val($(this).data('value'));
});

HTML:

    <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Foo
       <span class="caret"></span>
     </button>
     <ul class="dropdown-menu pull-left">
       <li><a href="#" data-value="bar">Bar</a></li>
       <li><a href="#" data-value="baz">Baz</a></li>
       <li><a href="#" data-value="beh">Beh</a></li>
     </ul>
   </div>

Answer 3

J'ai été en mesure d'améliorer légèrement les Jai la réponse de travailler dans le cas de vous avoir plus d'un bouton de liste déroulante avec une très bonne présentation qui fonctionne avec bootstrap 3:

Code pour Le Bouton

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

Extrait De JQuery

$(".dropdown-menu li a").click(function(){

  $(this).parents(".btn-group").find('.selection').text($(this).text());
  $(this).parents(".btn-group").find('.selection').val($(this).text());

});

J'ai également ajouté une marge de 5px droit à la "sélection" de la classe.

Answer 4

vous avez besoin d'utiliser ajouter une classe open en <div class="btn-group open">

et dans li ajouter class="active"

Answer 5

En outre modifié basé sur la réponse de @Kyle comme $.texte() renvoie la chaîne de caractères exacte, de sorte que le signe de la balise est imprimé, littéralement, que comme un balisage, juste au cas où quelqu'un voudrait garder le signe intacte dans la liste déroulante.

$(".dropdown-menu li").click(function(){
  $(this).parents(".btn-group").find('.btn').html(
  $(this).text()+" <span class=\"caret\"></span>"
  );
});