twitter-bootstrap Bootstrap 3 下拉选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23662150/
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
Bootstrap 3 dropdown select
提问by AstroSharp
We are trying re-implement our sign-up form with bootstrap. Our sign up form contains a drop-down list which represents a company type. I have searched extensively online but I do not see any example where a form input would be a drop down.
我们正在尝试使用引导程序重新实现我们的注册表单。我们的注册表单包含一个代表公司类型的下拉列表。我在网上进行了广泛的搜索，但没有看到任何表单输入是下拉菜单的示例。
Bootstrap gives a ton of examples of drop-downs related to various action but what I need is a drop down input. I have come up with two solutions:
Bootstrap 提供了大量与各种操作相关的下拉示例，但我需要的是下拉输入。我想出了两个解决方案：
First:
第一的：
<label>Type of Business</label>
<select class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
There is a problem here: although the box itself is styled correctly the drop-down itself has no styles applied.
这里有一个问题：虽然框本身的样式正确，但下拉本身没有应用任何样式。
Second version:
第二个版本：
<div class="btn-group">
<button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
Select Business type <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">small</a></li>
<li><a href="#">medium</a></li>
<li><a href="#">large</a></li>
</ul>
</div>
This one looks nice:
这个看起来不错：
but it's a button. When an option is selected, I do not want to perform any action all I want is to change text and bind the selection with a corresponding input field.
但它是一个按钮。选择选项后，我不希望执行所有我想要的操作是更改文本并使用相应的输入字段绑定选择。
Both of these approaches seams to be a wrong choice for my action. I refuse to believe that Bootstrap does not contain a simple drop-down single select component bound to an input field.
这两种方法对我的行为来说都是错误的选择。我拒绝相信 Bootstrap 不包含绑定到输入字段的简单下拉单选择组件。
What am I missing ? Please help.
我错过了什么？请帮忙。
采纳答案by paulalexandru
If you want to achieve thisjust keep you dropdown button and style it like the select box. The code is hereand below.
如果您想实现这一点，只需保留下拉按钮并将其样式设置为选择框。代码在这里和下面。
.btn {
cursor: default;
background-color: #FFF;
border-radius: 4px;
text-align: left;
}
.caret {
position: absolute;
right: 16px;
top: 16px;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
background-color: #FFF;
}
.btn-group.open .dropdown-toggle {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}
.btn-group {width: 100%}
.dropdown-menu {width: 100%;}
To make the button work like a select box, all you need to add is this tiny javascript code:
为了使按钮像选择框一样工作，您需要添加的只是这个小小的 javascript 代码：
$('.dropdown-menu a').on('click', function(){
$('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');
})
If you have multiplecustom dropdowns like this you can use this javascript code:
如果您有多个这样的自定义下拉菜单，您可以使用以下 javascript 代码：
$('.dropdown-menu a').on('click', function(){
$(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
})
回答by Dan
We just switched our site to bootstrap 3 and we have a bunch of forms...wasn't fun but once you get the hang it's not too bad.
我们刚刚将我们的网站切换到 bootstrap 3 并且我们有一堆表单......这并不有趣，但是一旦你掌握了它，它就不会太糟糕。
Is this what you are looking for? Demo Here
这是你想要的？演示在这里
<div class="form-group">
<label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
<div class="col-sm-6 col-md-4">
<select id="company" class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
</div>
</div>
回答by Nathalia Xavier
You can also add 'active' class to the selected item.
您还可以向所选项目添加“活动”类。
$('.dropdown').on( 'click', '.dropdown-menu li a', function() {
var target = $(this).html();
//Adds active class to selected item
$(this).parents('.dropdown-menu').find('li').removeClass('active');
$(this).parent('li').addClass('active');
//Displays selected text on dropdown-toggle button
$(this).parents('.dropdown').find('.dropdown-toggle').html(target + ' <span class="caret"></span>');
});
See the jsfiddle example
请参阅jsfiddle 示例
回答by Gokigooooks
Ive been looking for an nice select dropdown for some time now and I found a good one. So im just gonna leave it here. Its called bootsrap-select
一段时间以来，我一直在寻找一个不错的选择下拉列表，我找到了一个不错的选择。所以我只是要把它放在这里。它叫做 bootsrap-select
here'sthe link. check it out. it has editable dropdowns, combo drop downs and more. And its a breeze to add to your project.
这是链接。看看这个。它有可编辑的下拉菜单、组合下拉菜单等等。添加到您的项目中是轻而易举的。
If the link dies just search for bootstrap-selectby silviomoreto.github.io. This is better because its a normal select tag
如果链接失效，只需通过 silviomoreto.github.io搜索bootstrap-select。这更好，因为它是一个普通的选择标签
回答by Petr Pánek
I'd like to extend the paulalexandru's answer and put here complete solution that works generally with bootstrap dropdowns and updating main button's content and also the value from selected option.
我想扩展 paulalexandru 的答案，并在此处提供完整的解决方案，该解决方案通常适用于引导程序下拉菜单并更新主按钮的内容以及所选选项的值。
The bootstrap dropdown is defined this way:
bootstrap 下拉菜单是这样定义的：
<div class="btn-group" role="group">
<button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
Option 1 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-value="1">Option 1</a></li>
<li><a href="#" data-value="2">Option 2</a></li>
<li><a href="#" data-value="3">Option 3</a></li>
</ul>
</div>
Additional to standard bootstrap dropdown code, there is data-valueattribute for storing the values in every dropdown option (in <a>element).
除了标准的引导下拉代码之外，还有一个data-value属性用于在每个下拉选项（<a>元素中）中存储值。
Now the JS code. I crated function that handle the dropdowns:
现在是JS代码。我创建了处理下拉菜单的函数：
function dropdownToggle() {
// select the main dropdown button element
var dropdown = $(this).parent().parent().prev();
// change the CONTENT of the button based on the content of selected option
dropdown.html($(this).html() + ' </i><span class="caret"></span>');
// change the VALUE of the button based on the data-value property of selected option
dropdown.val($(this).prop('data-value'));
}
And of course we need to add event listener:
当然，我们需要添加事件监听器：
$(document).ready(function(){
$('.dropdown-menu a').on('click', dropdownToggle);
}
回答by domini ccqque
Try this:
试试这个：
<div class="form-group">
<label class="control-label" for="Company">Company</label>
<select id="Company" class="form-control" name="Company">
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</select>
</div>
回答by Paddy
The dropdown list appearing like that depends on what your browser is, as it is not possible to style this away for some. It looks like yours is IE9, but would look quite different in Chrome.
显示的下拉列表取决于您的浏览器是什么，因为某些人无法将其样式化。看起来你的是 IE9，但在 Chrome 中看起来完全不同。
You could look to use something like this:
你可以考虑使用这样的东西：
http://silviomoreto.github.io/bootstrap-select/
http://silviomoreto.github.io/bootstrap-select/
Which will make your selectboxes more consistent cross browser.
这将使您的选择框在跨浏览器中更加一致。
回答by Amit Talbot
;(function ($) {
$.fn.bootselect = function (options) {
this.each(function () {
var os = jQuery(this).find('option');
var parent = this.parentElement;
var css = jQuery(this).attr('class').split('input').join('btn').split('form-control').join('');
var vHtml = jQuery(this).find('option[value="' + jQuery(this).val() + '"]').html();
var html = '<div class="btn-group" role="group">' + '<button type="button" data-toggle="dropdown" value="1" class="btn btn-default ' + css + ' dropdown-toggle">' +
vHtml + '<span class="caret"></span>' + '</button>' + '<ul class="dropdown-menu">';
var i = 0;
while (i < os.length) {
html += '<li><a href="#" data-value="' + jQuery(os[i]).val() + '" html-attr="' + jQuery(os[i]).html() + '">' + jQuery(os[i]).html() + '</a></li>';
i++;
}
html += '</ul>' + '</div>';
var that = this;
jQuery(parent).append(html);
jQuery(parent).find('ul.dropdown-menu > li > a').on('click', function () {
jQuery(parent).find('button.btn').html(jQuery(this).html() + '<span class="caret"></span>');
jQuery(that).find('option[value="' + jQuery(this).attr('data-value') + '"]')[0].selected = true;
jQuery(that).trigger('change');
});
jQuery(this).hide();
});
};
}(jQuery));
jQuery('.bootstrap-select').bootselect();
回答by Theva
I found a better library
which transform the normal <select> <option>to bootsrap button dropdown format.
我找到了一个更好的库，可以将法线转换<select> <option>为 bootsrap 按钮下拉格式。
