2017-10-18 244 views
2

好日子如何選擇和使用把手與引導

我試圖使用引導程序的下拉列表中顯示存儲在我的API的具體數據,並顯示在下拉顯示項表示,與車把數據。我已經得到這個工作,但下拉菜單隻顯示列表項目,一旦你選擇一個列表項目,它會回到按鈕的名稱標籤,即主下拉按鈕。

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

唯一的問題是我不能使用類似:

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

這是我的第一個問題,所以我希望我做了正確的一切。 謝謝!

+0

我認爲你會將Bootstrap的'.dropdown'與'