另一种选择是使用引导选择。用他们自己的话来说:

一个使用按钮下拉的自定义选择/多选引导，设计成像常规引导选择一样。

Bootstrap 3使用.form-control类来设置表单组件的样式。

<select class="form-control">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
    <option value="five">Five</option>
</select>

http://getbootstrap.com/css/#forms-controls

另一种选择是使用引导选择。用他们自己的话来说:

一个使用按钮下拉的自定义选择/多选引导，设计成像常规引导选择一样。

你可以使用下拉组件进行引导选择…

引导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

我目前正在与下拉列表作斗争，我想分享我的经验:

在某些特定情况下，<select>不能使用，必须使用下拉菜单“模拟”。

例如，如果你想创建引导输入组，比如带有下拉菜单的按钮(参见http://getbootstrap.com/components/#input-groups-buttons-dropdowns)。不幸的是，<select>在输入组中不支持，它将不能正确呈现。

或者有人已经解出来了吗? 我对解决方案很感兴趣。

更复杂的是，如果您使用字形图标或字体awesome图标作为下拉菜单的内容，则不能使用如此简单的$(this).text()来捕获用户在下拉菜单中选择的内容。例如: <李id = " someId " > < a href = " # 0 " > <我类=“fa fa-minus”> < / i > < / > < /李> 因为在这种情况下，没有文本，如果你将添加一些，那么它也将显示在下拉元素中，这是不需要的。

我发现了两种可能的解决方案:

1） 使用$(this).html()获取所选<li>元素的内容，然后检查它，但你会得到类似于<a href="#0"><i class="fa fa-minus"></i></a>的内容，所以你需要使用它来提取你需要的内容。

2） 使用$(this).text()并在hidden span中隐藏元素中的文本: <李id = " someId " > < a href = " # 0 " > <我类=“fa fa-minus”> <跨类=“隐藏”>文本< / span > < / i > < / > < /李>。 对我来说，这是一个简单而优雅的解决方案，你可以把你需要的任何文本，文本将被隐藏，你不需要像选项1那样做$(this).html()结果的任何转换来得到你需要的东西。

我希望这是清楚的，可以帮助别人:-)

随着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>');
});