web-dev-qa-db-fra.com

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 la liste sélectionné ("élément I", "élément II", "élément III").

jquerytwitter-bootstrap
145
Suffii

D'après ce que j'ai compris de votre problème, vous souhaitez modifier le texte du bouton avec le clic sur le texte lié. Si vous le pouvez, essayez 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 l'élément de liste <li> est rempli via un appel ajax.

vous devez donc déléguer l'événement au parent statique le plus proche avec la méthode .on() jQuery:

 $(function(){

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

});

L'événement here est délégué au parent statique $(".dropdown-menu"), bien que vous puissiez également le déléguer à la $(document) car il est toujours disponible.

139
Jai

Mise à 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. Cela persistera également le curseur sur 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

129
cmcculloh

J'ai pu améliorer légèrement la réponse de Jai au travail si vous aviez plusieurs menus déroulants 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>

JQuery Snippet 

$(".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é un droit de marge de 5 pixels à la classe "sélection".

26
Kyle Crossman

Celui-ci fonctionne sur plusieurs listes déroulantes de la même page ..__ De plus, j'ai ajouté un signe d'insertion 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());
    });
7
WonderBoy

Voici ma version de ce document qui, j’espère, vous fera gagner un peu de temps :)

enter image description here 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>
6
Oskar

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

vous devez utiliser la classe add open dans <div class="btn-group open">

et dans li ajouter class="active"

5
NullPoiиteя

En outre modifié en fonction de la réponse de @Kyle en tant que $. Text () renvoie la chaîne exacte, ainsi la balise de curseur est imprimée littéralement, plutôt que comme une balise, juste au cas où quelqu'un voudrait garder le curseur intact dans le menu déroulant.

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

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());
   });
});
3
Sergio Promov

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

l'astuce consiste simplement à ajouter la classe "btn-group" au 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>');       
});
1
aGuegu

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

Essayez en ajoutant 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 de données sélectionné 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 à la section données jQuery

0
Murali Murugesan

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());
    });
0
Hitham S. AlQadheeb

J'ai dû mettre quelques javascripts affichés ci-dessus dans le code "document.ready". Sinon, ils ne travaillaient pas. 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>
0
Nico Vink

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 changer le texte du bouton only .

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)interdire l'utilisation des éléments de menu désactivés

0
Dmitrii Dubrovin