twitter-bootstrap 引导选择不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17941749/
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-select not working
提问by Fyodor Khruschov
I'm using bootstrap 2.3.2 and want to implement element to look like dropdown-menu. There is a solution in github: https://github.com/silviomoreto/bootstrap-select
我正在使用引导程序 2.3.2 并希望实现元素看起来像下拉菜单。github中有解决办法：https: //github.com/silviomoreto/bootstrap-select
My code:
我的代码：
<select class="selectpicker">
<option>1</option>
<option>2</option>
</select>
<script type="text/javascript">
$( function() {
$('.selectpicker').selectpicker();
})
</script>
It doesn't work. But when i type
它不起作用。但是当我输入
$('.selectpicker').selectpicker();
in console in Chrome DevTools - select changes to dropdown and it works.
在 Chrome DevTools 的控制台中 - 选择对下拉列表的更改并且它可以工作。
回答by Kami
You need to call the initialising function after the DOM is ready. This is usually done as part of a $(document).ready()function block.
您需要在 DOM 准备好后调用初始化函数。这通常作为$(document).ready()功能块的一部分完成。
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
When you are attempting the command via the console, the DOM is already loaded and available. As such the call works. The above code sample should work similarly.
当您通过控制台尝试执行命令时，DOM 已经加载并可用。因此，呼叫有效。上面的代码示例应该类似地工作。
回答by zwitterion
After 1 year I had the same issue. This worked for me:
1-Downloaded the zip files at owner site - http://silviomoreto.github.io/bootstrap-select/
1年后我遇到了同样的问题。这对我有用：
1-在所有者站点下载 zip 文件 - http://silviomoreto.github.io/bootstrap-select/
2-CSS, inside head tag->2files
2-CSS，在 head 标签内->2files
<link rel="stylesheet" type="text/css" href="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/css/bootstrap-select.css">
<link href="yourPath/bootstrap.min.css" rel="stylesheet">
3-Js files, at the end before close body tag.
3-Js 文件，在关闭 body 标签之前。
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>
<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>
<script>
$(document).ready(function () {
$('.selectpicker').selectpicker();
});
</script>
</body>
回答by Arthur BALAGNE
$(document).ready(function(){
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
Should work fine
应该工作正常
回答by Nima
Make sure bootstrap-select.jsor bootstrap-select.min.jsis included before loading your code.
在加载代码之前确保bootstrap-select.js或bootstrap-select.min.js包含在内。
<script src="path-to/js/bootstrap-select.min.js"></script>
回答by user1954544
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-default',
size: false
});
});
Have the same issue, this (set default size) helped me. Without settings menu is not showing.
有同样的问题，这个（设置默认大小）帮助了我。没有设置菜单不显示。
The size option is set to 'auto' by default. When size is set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute.http://silviomoreto.github.io/bootstrap-select/
The size option is set to 'auto' by default. When size is set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off. Set size to false to always show all items. The size of the menu can also be specifed using the data-size attribute.http://silviomoreto.github.io/bootstrap-select/
ADDED: Also don't forget about bootsrap version, I search around and found that this plugin works with 2.3.2 bootstrap version at official page it has such link. So I think i can be trouble too.
补充：也不要忘记 bootsrap 版本，我四处搜索，发现这个插件在官方页面上与 2.3.2 bootstrap 版本一起使用，它有这样的链接。所以我想我也可以是麻烦。
回答by Александр Берлин
This worked for me, if i delete this
这对我有用，如果我删除它
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Soo strange...
好奇怪...
