如何在Bootstrap Button下拉标题中显示选定项目
如何在Bootstrap Button下拉标题中显示选定项目
提问于 2012-11-18 12:18:21
我在我的应用程序中使用bootstrap下拉组件，如下所示：
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Item I</a></li>
<li><a tabindex="-1" href="#">Item II</a></li>
<li><a tabindex="-1" href="#">Item III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>我希望将所选项目显示为btn标签。换句话说，将“请从列表中选择”替换为已选择的列表项目(“项目I”、“项目II”、“项目III")。
回答 12
Stack Overflow用户
发布于 2014-02-25 06:19:00
针对Bootstrap 3.3.4进行了更新：
这将允许您为每个元素提供不同的显示文本和数据值。它还将在选定内容时保留插入符号。
JS：
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});HTML：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#" data-value="action">Action</a></li>
<li><a href="#" data-value="another action">Another action</a></li>
<li><a href="#" data-value="something else here">Something else here</a></li>
<li><a href="#" data-value="separated link">Separated link</a></li>
</ul>
</div>Stack Overflow用户
发布于 2016-01-25 04:24:02
这个单一的jQuery函数将完成您所需的所有工作。
$( document ).ready(function() {
$('.dropdown').each(function (key, dropdown) {
var $dropdown = $(dropdown);
$dropdown.find('.dropdown-menu a').on('click', function () {
$dropdown.find('button').text($(this).text()).append(' <span class="caret"></span>');
});
});
});Stack Overflow用户
发布于 2019-02-23 21:08:14
使用多个下拉菜单的另一种简单方法(Bootstrap 4)
$('.dropdown-item').on('click', function(){
var btnObj = $(this).parent().siblings('button');
$(btnObj).text($(this).text());
$(btnObj).val($(this).text());
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13437446
复制相关文章
相似问题
腾讯云开发者
