jQuery 如何使用引导选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15726411/
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 to use Bootstrap-select?
提问by user2228523
I'm new to this. I'm trying the Bootstrap-selectbut I'm not getting the desired effect like here https://developer.snapappointments.com/bootstrap-select/. I have downloaded the files and pointed to the CSS and JS in the head. I have enabled Bootstrap-select via JavaScript in the head as well and still not working – I'm just getting the default appearance. Here is my complete code. What am I doing wrong here? Any tips will be appreciated.
我是新手。我正在尝试Bootstrap-select，但我没有得到像这里https://developer.snapappointments.com/bootstrap-select/那样想要的效果。我已经下载了文件并指向头部的 CSS 和 JS。我也在头部通过 JavaScript 启用了 Bootstrap-select，但仍然无法正常工作 - 我只是获得默认外观。这是我的完整代码。我在这里做错了什么？任何提示将不胜感激。
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
</script>
</head>
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</body>
</html>
回答by David
I had a similar problem. Here is a working example for anyone coming to this question later like I did.
我有一个类似的问题。这是一个像我一样后来提出这个问题的人的工作示例。
Note there are 2 CSSfiles and 3 JavaScriptfiles you must include.
请注意，您必须包含2 个 CSS文件和3 个 JavaScript文件。
$(document).ready(function(e) {
$('.selectpicker').selectpicker();
});<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/css/bootstrap-select.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.9.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>回答by davidkonrad
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
Your script is declared and therefore executed beforethe <select class="selectpicker">-declaration, causing bootstrap-select never being initialized opon .selectpicker(selectpicker doesnt exists when the script is runned). So put it in a document(ready)or after the HTML.
你的脚本声明，所以执行前的<select class="selectpicker">-declaration，造成引导，选择从不被初始化OPON .selectpicker（当脚本拼命地跑selectpicker犯规存在）。所以把它放在一个document(ready)或 HTML 之后。
回答by Tamil Selvan C
Include jquery library and bootstrap js
包含 jquery 库和 bootstrap js
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap-master/docs/assets/js/bootstrap.min.js" type="text/javascript"></script>
and code as
并编码为
$(document).ready(function() {
$('.selectpicker').selectpicker({
style: 'btn-info',
size: 4
});
});
Note:Always used minified css and js, to increase page speed
注意：始终使用缩小的 css 和 js，以提高页面速度
回答by zwitterion
After 1 year I had the same issue. This worked for me:
1年后，我遇到了同样的问题。这对我有用：
1-Downloaded the zip files at owner site - https://developer.snapappointments.com/bootstrap-select/
1-在所有者站点下载 zip 文件 - https://developer.snapappointments.com/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 bode tag.
3-Js 文件，在关闭 bode 标签之前的末尾。
<body>
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript" src="yourPath/silviomoreto-bootstrap-select-83d5a1b/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="yourPath/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="yourPath/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.selectpicker').selectpicker();
});
</script>
</body>
