twitter-bootstrap 如何使用引导程序呈现列表选择框（下拉列表）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18150954/
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
How can I render a list select box (dropdown) with bootstrap?
提问by genxgeek
Is there anything out of the box that bootstrap supports to render a "regular" defacto drop down list select box? That is, where the drop down box is a list of values and if selected populate the contents of the list box?
bootstrap 是否支持呈现“常规”事实上的下拉列表选择框的开箱即用的东西？也就是说，下拉框是一个值列表，如果选中则填充列表框的内容？
Something similar to this functionality?
类似于此功能的东西？
http://bootstrapformhelpers.com/select/
http://bootstrapformhelpers.com/select/
回答by Baerkins
Bootstrap 3 uses the .form-controlclass to style form components.
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>
回答by Zim
Another option is to make the Bootstrap dropdown behave like a select using jQuery...
另一种选择是使用 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>');
});
回答by Ben
Skelly's nice and easy answer is now outdated with the changes to the dropdown syntax in Bootstap. Instead use this:
随着 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>');
});
回答by Brynner Ferreira
Test: http://jsfiddle.net/brynner/hkwhaqsj/6/
测试：http: //jsfiddle.net/brynner/hkwhaqsj/6/
HTML
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
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
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%;}
回答by Ariel
Another option could be using bootstrap select. On their own words:
另一种选择是使用bootstrap select。用他们自己的话来说：
A custom select / multiselect for Bootstrap using button dropdown, designed to behave like regular Bootstrap selects.
使用按钮下拉菜单的 Bootstrap 自定义选择/多选，其行为类似于常规 Bootstrap 选择。
回答by omabra
Another way without using the .form-control is this:
另一种不使用 .form-control 的方法是：
$(".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>回答by Steve Hawkins
Ben's code requires the parent div to have the form-group class (I was using btn-group), this is a slightly different version which just searches for the closest div and may even be a bit faster.
Ben 的代码要求父 div 具有表单组类（我使用的是 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>');
});
回答by Arun
The Bootstrap3 .form-controlis cool but for those who love or need the drop-down with button and ul option, here is the updated code. I have edited the code by Steve to fix jumping to the hash link and closing the drop-down after selection.
Bootstrap3.form-control很酷，但对于那些喜欢或需要带有按钮和 ul 选项的下拉菜单的人来说，这里是更新的代码。我已经编辑了 Steve 的代码，以修复跳转到哈希链接并在选择后关闭下拉列表的问题。
Thanks to Steve, Ben and 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;
});
回答by Petr Pánek
I'm currently fighting with dropdowns and I'd like to share my experiences:
我目前正在与下拉列表作斗争，我想分享我的经验：
There are specific situations where <select>can't be used and must be 'emulated' with dropdown.
在某些特定情况下<select>无法使用，必须使用下拉菜单“模拟”。
For example if you want to create bootstrap input groups, like Buttons with dropdowns (see http://getbootstrap.com/components/#input-groups-buttons-dropdowns). Unfortunately <select>is not supported in input groups, it will not be rendered properly.
例如，如果您想创建引导程序输入组，例如带有下拉菜单的按钮（请参阅http://getbootstrap.com/components/#input-groups-buttons-dropdowns）。不幸的<select>是，输入组不支持，它不会被正确呈现。
Or does anybody solved this already? I would be very interested on the solution.
或者有人已经解决了这个问题吗？我会对解决方案非常感兴趣。
And to make it even more complicated, you can't use so simply $(this).text()to catch what user selected in dropdown if you're using glypicons or font awesome icons as content for dropdown. For example:
<li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>Because in this case there is no text and if you will add some then it will be also displayed in dropdown element and this is unwanted.
更复杂的是，$(this).text()如果您使用 glypicons 或字体真棒图标作为下拉列表的内容，则不能简单地使用来捕捉用户在下拉列表中选择的内容。例如：
<li id="someId"><a href="#0"><i class="fa fa-minus"></i></a></li>因为在这种情况下没有文本，如果您添加一些文本，那么它也会显示在下拉元素中，这是不需要的。
I found two possible solutions:
我找到了两种可能的解决方案：
1)
Use $(this).html()to get content of the selected <li>element and then to examine it, but you will get something like <a href="#0"><i class="fa fa-minus"></i></a>so you need to play with this to extract what you need.
1)$(this).html()用于获取所选<li>元素的内容，然后对其进行检查，但您会得到类似的内容，<a href="#0"><i class="fa fa-minus"></i></a>因此您需要使用它来提取您需要的内容。
2)
Use $(this).text()and hide the text in element in hidden span:
<li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>.
For me this is simple and elegant solution, you can put any text you need, text will be hidden, and you don't need to do any transformations of $(this).html()result like in option 1) to get what you need.
2）$(this).text()在隐藏跨度中使用和隐藏元素中的文本：
<li id="someId"><a href="#0"><i class="fa fa-minus"><span class="hidden">text</span></i></a></li>。对我来说，这是一个简单而优雅的解决方案，您可以放置所需的任何文本，文本将被隐藏，并且您无需$(this).html()像选项 1) 中那样对结果进行任何转换 即可获得所需的内容。
I hope it's clear and can help somebody :-)
我希望它很清楚并且可以帮助某人:-)
