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 BTN-Label anzeigen. Mit anderen Worten, ersetzen Sie "Bitte aus Liste auswählen" durch das ausgewählte Listenelement ("Element I", "Element II", "Element III").

Soweit ich verstanden habe, besteht Ihr Problem darin, dass Sie den Text der Schaltfläche mit dem klickenden verknüpften Text ändern möchten. Wenn ja, können Sie diesen versuchen: 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());

   });

});

Gemäß Ihrem Kommentar:

Dies funktioniert bei mir nicht, wenn ich Listenelemente habe, <li>die über einen Ajax-Aufruf ausgefüllt wurden.

Daher müssen Sie das Ereignis mit der .on()jQuery-Methode an das nächstgelegene statische ü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 $(".dropdown-menu")das Ereignis an das statische übergeordnete Element delegiert, obwohl Sie das Ereignis auch an das delegieren können, $(document)da es immer verfügbar ist.

Aktualisiert für Bootstrap 3.3.4:

Auf diese Weise können Sie für jedes Element einen anderen Anzeigetext und Datenwert festlegen. Es wird auch das Caret bei der Auswahl beibehalten.

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

Ich konnte Jais Antwort auf die Arbeit leicht verbessern, wenn Sie mehr als ein Dropdown-Menü mit einer ziemlich guten Präsentation haben, die mit Bootstrap 3 funktioniert:

Code für den Knopf

<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 der Klasse "Auswahl" auch ein 5-Pixel-Randrecht hinzugefügt.

Diese einzelne 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>');
        });
    });
});

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

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

Dieser funktioniert mit mehr als einem Dropdown auf derselben Seite. Außerdem habe ich dem ausgewählten Artikel Caret 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());
    });

Sie müssen add class openin verwenden <div class="btn-group open">

und lizusätzlich hinzufügenclass="active"

Weiter modifiziert basierend auf der Antwort von @Kyle, da $ .text () eine genaue Zeichenfolge zurückgibt, sodass das Caret-Tag buchstäblich gedruckt wird, als als Markup, nur für den Fall, dass jemand das Caret in der Dropdown-Liste intakt halten möchte.

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

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

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

Es scheint ein langes Problem zu sein. Wir möchten lediglich ein Auswahl-Tag in der Eingabegruppe implementieren. Der Bootstrap würde dies jedoch 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>');       
});

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

Versuchen Sie dann , data-selected-item = 'true' für das Element li hinzuzufügen, auf das Sie geklickt haben

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

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

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

Ich musste einige der oben angezeigten Javascripts in den Code "document.ready" einfügen. Sonst haben sie nicht funktioniert. Wahrscheinlich offensichtlich für viele, 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>

Beispielsweise:

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, um nur den Text der Schaltfläche zu ändern .

In $(document).ready(function () {}den folgenden Text einfügen

JavaScript:

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

:not(.disabled) Erlaube nicht, die deaktivierten Menüpunkte zu verwenden