So wählen und Anzeigeelemente in einem Drop-Down mit Lenker mit Bootstrap

Question

Guten Tag

Ich versuche Bootstrap-Dropdown-Listen zu verwenden, um bestimmte Daten in meiner API und Anzeige gespeichert angezeigt werden die Daten mit Lenker. Ich habe das zum Laufen gebracht, aber das Dropdown-Menü zeigt nur die Listenelemente an. Sobald Sie ein Listenelement ausgewählt haben, geht es zurück zum Namensschild der Schaltfläche, dh zur Haupt-Dropdown-Schaltfläche.

<div class="filterTable col-md-12">         
    <script class="filterDisplay" type="text/handlebars x">        
    <div class="dropdownMenus col-md-12"> 
     <div class="dropdown float-left"> 
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Brand 
     </button> 
     <ul class="dropdown-menu dropdownBrand" aria-labelledby="dropdownMenuButton"> 
      {{#each shoes}} 
      <li><a class="brandDropdown dropdown-item" id="brandDropdown" value="{{this}}">{{this.brand}}</a></li> 
      {{/each}} 
     </ul> 
     </div> 

     <div class="dropdown float-left"> 
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Size 
     </button> 
     <ul class="dropdown-menu dropdownSize" aria-labelledby="dropdownMenuButton"> 
      {{#each shoes}} 
      <li><a class="sizeDropdown dropdown-item" id="sizeDropdown" value="{{this}}">{{this.size}}</a></li> 
      {{/each}} 
     </ul> 
     </div> 

     <div class="dropdown float-left"> 
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Color 
     </button> 
     <ul class="dropdown-menu dropdownColor" aria-labelledby="dropdownMenuButton"> 
      {{#each shoes}} 
      <li><a class="colorDropdown dropdown-item" id="colorDropdown" value="{{this}}">{{this.color}}</a></li> 
      {{/each}} 
     </ul> 
     </div> 

     <p data-placement="top" data-toggle="tooltip" title="Search"><button class="filterButton btn btn-success btn-xs float-left" data-title="Search">Search </button></p>      
    </div> 
    </script> 
</div> 

Das einzige Problem ist, dass ich nicht so etwas wie verwenden:

$('.dropdown li a').on('click', function(){ 
    var selected = $(this).text(); 
    $(this).parents('.dropdown').find('button').text(selected); 
}) 

Dies ist meine erste Frage, so hoffe ich, dass ich alles richtig gemacht haben. Danke!