在引导按钮下拉标题/占位符文本中显示所选项目

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 版本：

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