是否有任何自举支持呈现“常规”事实上的下拉列表选择框?也就是说，下拉框是一个值的列表，如果选择填充列表框的内容?
是否有类似的功能?
http://bootstrapformhelpers.com/select/
当前回答
本的代码要求父div有form-group类(我使用btn-group)，这是一个略有不同的版本，只是搜索最近的div，甚至可能更快一点。
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});
其他回答
本的代码要求父div有form-group类(我使用btn-group)，这是一个略有不同的版本，只是搜索最近的div，甚至可能更快一点。
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>');
});
另一种选择是使用引导选择。用他们自己的话来说:
一个使用按钮下拉的自定义选择/多选引导，设计成像常规引导选择一样。
随着Bootstap中下拉语法的变化，Skelly的漂亮而简单的答案现在已经过时了。你可以这样说:
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.form-group').find('button[data-toggle="dropdown"]').html(selText+' <span class="caret"></span>');
});
测试:http://jsfiddle.net/brynner/hkwhaqsj/6/
HTML
<div class="input-group-btn select" id="select1">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">One</span> <span class="caret"></span></button>
<ul class="dropdown-menu option" role="menu">
<li id="1"><a href="#">One</a></li>
<li id="2"><a href="#">Two</a></li>
</ul>
</div>
jQuery
$('body').on('click','.option li',function(){
var i = $(this).parents('.select').attr('id');
var v = $(this).children().text();
var o = $(this).attr('id');
$('#'+i+' .selected').attr('id',o);
$('#'+i+' .selected').text(v);
});
CSS
.select button {width:100%; text-align:left;}
.select .caret {position:absolute; right:10px; margin-top:10px;}
.select:last-child>.btn {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.selected {padding-right:10px;}
.option {width:100%;}
你可以使用下拉组件进行引导选择…
引导5(更新2021年)
<a class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" href="#" id="selectA">Select<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Item I</a></li>
<li class="dropdown-item"><a href="#">Item II</a></li>
<li class="dropdown-item"><a href="#">Item III</a></li>
<li class="dropdown-item"><a href="#">Item IV</a></li>
</ul>
let links = document.querySelectorAll('.dropdown-item')
links.forEach(element => element.addEventListener("click", function () {
let text = element.innerText
document.getElementById('selectA').innerText = text
}))
引导5
原始答案(引导3)
另一个选择是使用jQuery使Bootstrap下拉菜单的行为像一个选择…
$(".dropdown-menu li a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});
引导3
