在引導按鈕中顯示選定的項目下拉菜單標題/佔位符文本

Question

Stackoverflow上已經問了幾個這個問題 - 但是我仍然無法到達它的底部......再加上我的查詢將投入更多下拉菜單。所以我有兩個下拉菜單和一個搜索。我想從下拉菜單中選擇，並選擇'取代'下拉菜單。但是我也需要記住，點擊搜索後，它將查詢這些選定字段的數據庫。

  <!-- Search box Start --> 
        <form> 
         <div class="well carousel-search hidden-phone"> 
          <div class="btn-group"> 
           <a class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Select a Country<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
            <li><a href="#">Item I</a></li> 
            <li><a href="#">Item II</a></li> 
            <li><a href="#">Item III</a></li> 
            <li class="divider"></li> 
            <li><a href="#">Other</a></li> 
            </ul> 
         </div> 

          <div class="btn-group"> 
           <a class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Select a Region/City<span class="caret"></span></a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Item I</a></li> 
            <li><a href="#">Item II</a></li> 
            <li><a href="#">Item III</a></li> 
            <li class="divider"></li> 
            <li><a href="#">Other</a></li> 
            </ul> 
          </div> 
          <div class="btn-group"> 
           <button type="submit" class="btn btn-primary">Search</button> 
          </div> 

         </div> 
        </form> 
      <!-- Search box End --> 

Answer 1

您可以設置所選文本下拉列表這樣的..

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

然後處理搜索按鈕點擊獲取所選值：

$("#btnSearch").click(function(){ 
    alert($('.btn-select').text()+", "+$('.btn-select2').text()); 
}); 

工作演示：http://www.bootply.com/63926

Answer 2

Bootstrap 4 versio n：

$(".dropdown-item").click(function(){ 
    var selText = $(this).text(); 
    $(this).parents('.dropdown').find('.dropdown-toggle').html(selText+'<span class="caret"></span>'); 
});