it-swarm.com.de

So zeigen Sie das ausgewählte Element im Dropdown-Titel der Bootstrap-Schaltfläche an

Ich verwende die Bootstrap-Dropdown-Komponente in meiner Anwendung wie folgt:

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

Ich möchte das ausgewählte Element als BT-Label anzeigen. Ersetzen Sie also "Bitte wählen Sie aus der Liste" durch das ausgewählte Listenelement ("Element I", "Element II", "Element III").

145
Suffii

Soweit ich verstanden habe, ist Ihr Problem, dass Sie den Text der Schaltfläche mit dem angeklickten verknüpften Text ändern möchten, wenn Sie dies versuchen können: 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());

   });

});

Wie in Ihrem Kommentar:

das funktioniert nicht für mich, wenn ich Listen-Element <li> durch ajax-Aufruf aufgefüllt habe.

daher müssen Sie das Ereignis mit der .on()-jQuery-Methode an das nächste statische übergeordnete übergeordnete Element delegieren:

 $(function(){

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

});

Hier wird das Ereignis an die statische übergeordnete $(".dropdown-menu") delegiert, obwohl Sie das Ereignis auch an die $(document) delegieren können, da es immer verfügbar ist.

139
Jai

Aktualisiert für Bootstrap 3.3.4:

Dadurch können Sie für jedes Element einen anderen Anzeigetext und einen anderen Datenwert verwenden. Es bleibt auch bei der Auswahl bestehen.

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>

JS Fiddle Beispiel

129
cmcculloh

Ich konnte die Antwort von Jai etwas verbessern, wenn Sie mehr als einen Button-Dropdown mit einer ziemlich guten Präsentation haben, die mit Bootstrap 3 funktioniert:

Code für den Button

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

});

Ich habe auch ein 5px Margin-Right zur "Selection" -Klasse hinzugefügt.

26
Kyle Crossman

Dies funktioniert für mehr als ein Dropdown auf derselben Seite . Außerdem habe ich ein Caret zu einem ausgewählten Element hinzugefügt:

    $(".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

Hier ist meine Version davon, von der ich hoffe, dass sie etwas Zeit sparen kann :)

enter image description herejQuery TEIL:

$(".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");
});

HTML-TEIL: 

<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

Diese einzige jQuery-Funktion erledigt alles, was Sie brauchen.

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

sie müssen die Add-Klasse open in <div class="btn-group open"> verwenden.

und in li add class="active"

5
NullPoiиteя

Basierend auf der Antwort von @Kyle weiter geändert, als $. Text () gibt die exakte Zeichenfolge zurück. Der Caret-Tag wird also buchstäblich gedruckt und nicht als Markup, nur für den Fall, dass jemand die Einfügemarke intakt halten möchte.

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

Ich habe das Skript für mehrere Dropdowns auf der Seite korrigiert

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

Es scheint ein langes Problem zu sein. Wir möchten lediglich ein select-Tag in der Eingabegruppe implementieren. Aber der Bootstrap würde es nicht tun: https://github.com/twbs/bootstrap/issues/10486

der Trick besteht darin, dem übergeordneten div nur die Klasse "btn-group" hinzuzufügen

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

Sobald Sie auf das Element klicken, fügen Sie einige Datenattribute wie data-selected-item = 'true' hinzu und rufen Sie es erneut ab.

Probieren Sie Hinzufügen von Daten-selected-item = 'true' für li Element aus, auf das Sie geklickt haben

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

Bevor Sie dieses Attribut hinzufügen, entfernen Sie einfach das in der Liste ausgewählte, ausgewählte Datenelement. Hoffe das würde dir helfen

Informationen zur Verwendung von Datenattributen in jQuery finden Sie unter jQuery-Daten

0

Eine weitere einfache Möglichkeit (Bootstrap 4), mit mehreren Dropdowns zu arbeiten

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

Ich musste einige der angezeigten Javascripts oben in den "document.ready" Code einfügen. Sonst haben sie nicht funktioniert. Wahrscheinlich für viele offensichtlich, aber nicht für mich. Wenn Sie also testen, schauen Sie sich diese Option an.

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

Zum Beispiel:

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>

Ich verwende das neue Element BtnCaption zum Ändern des Textes von only button.

Einfügen in$(document).ready(function () {}den folgenden Text

JavaScript:

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

:not(.disabled)erlaubt nicht die Verwendung der deaktivierten Menüpunkte

0