13

我是新手。我正在尝试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>
4

4 回答 4

22

我有一个类似的问题。对于以后像我一样提出这个问题的任何人来说，这是一个工作示例。

请注意，您必须包含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>

于 2013-09-25T09:43:47.957 回答
8 
$(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
  });
});

您的脚本已声明并因此在 -declaration 之前执行，导致<select class="selectpicker">bootstrap-select 永远不会被初始化 opon .selectpicker（运行脚本时 selectpicker 不存在）。所以把它放在document(ready)HTML 之后。

于 2013-03-31T05:35:35.453 回答
5

包括 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>

并编码为

$(document).ready(function() {
$('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });
  });

注意： 始终使用缩小的 css 和 js，以提高页面速度

于 2013-03-31T04:42:00.170 回答
3

1年后，我遇到了同样的问题。这对我有用：

1-在所有者站点下载 zip 文件 - https://developer.snapappointments.com/bootstrap-select/

2-CSS，内头标签->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 文件，在关闭 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>
于 2014-12-09T22:33:33.793 回答