Comment afficher l'élément sélectionné dans le titre de la liste déroulante du bouton Bootstrap

J'utilise le composant Bootstrap Dropdown dans mon application comme ceci:

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

Je voudrais afficher l'élément sélectionné comme étiquette btn. En d'autres termes, remplacez «Veuillez sélectionner dans la liste» par l'élément de liste qui a été sélectionné («Item I», «Item II», «Item III»).

Si j'ai bien compris, votre problème est que vous souhaitez modifier le texte du bouton avec le texte lié en cliquant, si c'est le cas, 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 lorsque j'ai des listes d'éléments <li>remplis via un appel ajax.

vous devez donc déléguer l'événement au parent statique le plus proche avec la .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é au parent statique $(".dropdown-menu"), bien que vous puissiez également déléguer l'événement au parent $(document)car il est toujours disponible.

Mis à jour pour Bootstrap 3.3.4:

Cela vous permettra d'avoir un texte d'affichage et une valeur de données différents pour chaque élément. Il persistera également le curseur lors de la sélection.

JS:

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

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" data-value="action">Action</a></li>
    <li><a href="#" data-value="another action">Another action</a></li>
    <li><a href="#" data-value="something else here">Something else here</a></li>
    <li><a href="#" data-value="separated link">Separated link</a></li>
  </ul>
</div>

Exemple JS Fiddle

J'ai pu légèrement améliorer la réponse de Jai pour qu'elle fonctionne dans le cas où vous auriez plus d'un menu déroulant avec une assez 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 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 droite de 5px à la classe "sélection".

Cette fonction jQuery unique fera tout ce dont vous avez besoin.

$( document ).ready(function() {
    $('.dropdown').each(function (key, dropdown) {
        var $dropdown = $(dropdown);
        $dropdown.find('.dropdown-menu a').on('click', function () {
            $dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
        });
    });
});

Voici ma version de celle-ci qui, j'espère, pourra vous faire gagner du temps :)

jQuery PART:

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


 $(this).parent('li').siblings().removeClass('active');
    $('#vl').val($(this).attr('data-value'));
  $(this).parents('.btn-group').find('.selection').html(selText);
  $(this).parents('li').addClass("active");
});

PARTIE HTML:

<div class="container">
  <div class="btn-group">
    <a class="btn btn-default dropdown-toggle btn-blog " data-toggle="dropdown" href="#" id="dropdownMenu1" style="width:200px;"><span class="selection pull-left">Select an option </span> 
      <span class="pull-right glyphiconglyphicon-chevron-down caret" style="float:right;margin-top:10px;"></span></a>

     <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li><a href="#" class="" data-value=1><p> HER Can you write extra text or <b>HTLM</b></p> <h4> <span class="glyphicon glyphicon-plane"></span>  <span> Your Option 1</span> </h4></a>  </li>
       <li><a href="#" class="" data-value=2><p> HER Can you write extra text or <i>HTLM</i> or some long long long long long long long long long long text </p><h4> <span class="glyphicon glyphicon-briefcase"></span> <span>Your Option 2</span>  </h4></a>
      </li>
      <li class="divider"></li>
   <li><a href="#" class="" data-value=3><p> HER Can you write extra text or <b>HTLM</b> or some </p><h4> <span class="glyphicon glyphicon-heart text-danger"></span> <span>Your Option 3</span>  </h4></a>
      </li>
    </ul>
  </div>
  <input type="text" id="vl" />
</div>  

Celui-ci fonctionne sur plus d'un menu déroulant dans la même page. De plus, j'ai ajouté un curseur sur l'élément sélectionné:

    $(".dropdown-menu").on('click', 'li a', function(){
        $(this).parent().parent().siblings(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
        $(this).parent().parent().siblings(".btn:first-child").val($(this).text());
    });

vous devez utiliser ajouter une classe opendans <div class="btn-group open">

et en liplusclass="active"

En outre modifié en fonction de la réponse de @Kyle car $ .text () retourne la chaîne exacte, de sorte que la balise caret est imprimée littéralement, plutôt que comme un balisage, juste au cas où quelqu'un voudrait garder le curseur intact dans la liste déroulante.

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

J'ai corrigé le script pour plusieurs listes déroulantes sur la page

$(function(){
    $(".dropdown-menu li a").click(function(){
        var item = $(this);
        var id = item.parent().parent().attr("aria-labelledby");

        $("#"+id+":first-child").text($(this).text());
        $("#"+id+":first-child").val($(this).text());
   });
});

Un autre moyen simple (Bootstrap 4) de travailler avec plusieurs listes déroulantes

    $('.dropdown-item').on('click',  function(){
        var btnObj = $(this).parent().siblings('button');
        $(btnObj).text($(this).text());
        $(btnObj).val($(this).text());
    });

Cela semble être un long problème. Tout ce que nous voulons, c'est simplement implémenter une balise de sélection dans le groupe d'entrée. Mais le bootstrap ne le ferait pas: https://github.com/twbs/bootstrap/issues/10486

l'astuce consiste simplement à ajouter la classe "btn-group" à la div parent

html:

<div class="input-group">
  <div class="input-group-btn btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Product Name <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
    </ul>
  </div>
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">Search</button>
  </span>
</div>

js:

$(".dropdown-menu li a").click(function(e){
    var selText = $(this).text();
    $(this).parents('.input-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');       
});

Une fois que vous avez cliqué sur l'élément, ajoutez un attribut de données tel que data-selected-item = 'true' et récupérez-le à nouveau.

Essayez d' ajouter data-selected-item = 'true' pour l' élément li sur lequel vous avez cliqué, puis

   $('ul.dropdown-menu li[data-selected-item] a').text();

Avant d'ajouter cet attribut, vous supprimez simplement l'élément sélectionné de données existant dans la liste. J'espère que cela vous aiderait

Pour plus d'informations sur l'utilisation des attributs de données dans jQuery, reportez-vous aux données jQuery

J'ai dû mettre quelques javascripts affichés ci-dessus dans le code "document.ready". Sinon, ils n'ont pas fonctionné. Probablement évident pour beaucoup, mais pas pour moi. Donc, si vous testez, regardez cette option.

<script type="text/javascript">
$(document).ready(function(){
//rest of the javascript code here
});
</script>

Par exemple:

HTML:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
     <BtnCaption>Select item</BtnCaption>
     <span class="caret"></span>   
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">Option 1</a></li>
     <li><a href="#">Option 2</a></li>
     <li class="disabled"><a href="#">Option 3</a></li>   
  </ul> 
</div>

J'utilise le nouvel élément BtnCaption pour modifier uniquement le texte du bouton.

Coller dans $(document).ready(function () {}le texte suivant

JavaScript:

    $(".dropdown-menu li:not(.disabled) a").click(function () {
        $(this).closest(".dropdown").find(".btn BtnCaption").text($(this).text()));
    });

:not(.disabled) ne pas autoriser l'utilisation des éléments de menu désactivés