如何使用引导来呈现列表select框（下拉列表）？
引导程序是否支持渲染“常规”事实上的下拉列表select框？ 也就是说，下拉框是一个值列表，如果select填充列表框的内容？
类似于这个function的东西？
http://bootstrapformhelpers.com/select/
引导程序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>
另一个select是使引导下拉行为像使用jQueryselect…
$(".dropdown-menu li a").click(function(){ var selText = $(this).text(); $(this).parents('.btn-group').find('.dropdown-toggle').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>'); });
testing： 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%;}
另一个选项可能是使用引导select 。 用他们自己的话说：
自定义select/多选引导程序使用button下拉菜单，旨在行为像常规引导select。
另一种不使用.form控件的方法是：
$(".dropdown-menu li a").click(function(){ $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>'); $(this).parents(".btn-group").find('.btn').val($(this).data('value')); });
$(".dropdown-menu li a").click(function(){ $(this).parents(".btn-group").find('.btn').html($(this).text() + ' <span class="caret"></span>'); $(this).parents(".btn-group").find('.btn').val($(this).data('value')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Test <span class="caret"> </span> </button> <ul class="dropdown-menu"> <li><a href='#'>test 1</a></li> <li><a href='#'>test 2</a></li> <li><a href='#'>test 3</a></li> </ul> </div>
本的代码需要父div具有form-group类（我使用btn组），这是一个稍微不同的版本，只是search最接近的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>'); });
Bootstrap3 .form-control很酷，但对于那些喜欢或需要下拉button和ul选项的人来说，这里是更新后的代码。 我已经编辑了史蒂夫的代码来修复跳转到散列链接，并closuresselect后的下拉列表。
感谢Steve，Ben和Skelly！
$(".dropdown-menu li a").click(function () { var selText = $(this).text(); $(this).closest('div').find('button[data-toggle="dropdown"]').html(selText + ' <span class="caret"></span>'); $(this).closest('.dropdown').removeClass("open"); return false; });
我正在与下拉菜单战斗，我想分享我的经验：
在某些情况下， <select>不能使用，必须通过下拉菜单来“模拟”。
例如，如果要创build引导程序input组，例如带下拉button（请参阅http://getbootstrap.com/components/#input-groups-buttons-dropdowns ）。 不幸的是，在input组中不支持<select> ，它将不会被正确渲染。
还是有人解决这个问题了？ 我会对解决scheme非常感兴趣。
为了使它更加复杂，如果您使用glypicons或字体棒图标作为下拉内容，则不能使用$(this).text()来捕获用户在下拉列表中select的内容。 例如： <li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>因为在这种情况下没有文本，如果你将添加一些，那么它也将显示在下拉列表中，这是不需要的。
我find了两个可能的解
1）使用$(this).html()获取所选<li>元素的内容，然后检查它，但是会得到类似<a href="#0"><i class="fa fa-minus"></i></a>所以你需要玩这个来提取你所需要的。
2）使用$(this).text()并隐藏元素中隐藏的文本中的文本： <li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li> 。 对于我来说，这是一个简单而优雅的解决scheme，你可以把你需要的任何文本，文本隐藏起来，而不需要像在选项1中那样对$(this).html()你需要。
我希望这是明确的，可以帮助某人:-)
