好日子如何選擇和使用把手與引導
我試圖使用引導程序的下拉列表中顯示存儲在我的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);
})
這是我的第一個問題,所以我希望我做了正確的一切。 謝謝!
我認爲你會將Bootstrap的'.dropdown'與'
@ j.titus好的,那麼我該如何去做讓列表項保持選中狀態,但是我已經擁有了HTML/Bootstrap/Handlebars? – ShanaSkydancer