jQuery 在 Bootstrap 按钮下拉标题/占位符文本中显示所选项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17061812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Selected Item in Bootstrap Button Dropdown Title / place holder text
提问by Tom Rudge
This question has been asked a few times on Stackoverflow - however I still cant get to the bottom of it... plus my query is throwing more dropdowns into play. So I have two dropdowns and a search. I want to select from the dropdowns and the 'selected' to replace the dropdown place holder text. But I also need to keep in mind that after hitting search it will query a database for these selected fields.
这个问题在 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 -->
回答by Zim
You can set the selected dropdown text like this..
您可以像这样设置选定的下拉文本..
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});
And then handle the search button click to get the selected values:
然后处理搜索按钮单击以获取所选值：
$("#btnSearch").click(function(){
alert($('.btn-select').text()+", "+$('.btn-select2').text());
});
Working demo: http://www.bootply.com/63926
工作演示：http: //www.bootply.com/63926
回答by Ryan
Bootstrap 4 version:
引导程序 4 版本：
$(".dropdown-item").click(function(){
var selText = $(this).text();
$(this).parents('.dropdown').find('.dropdown-toggle').html(selText+'<span class="caret"></span>');
});
