17

我正在使用引导程序 2.3.2 并希望实现元素看起来像下拉菜单。github中有解决方案：https ://github.com/silviomoreto/bootstrap-select

我的代码：

<select class="selectpicker">
    <option>1</option>
    <option>2</option>
</select>

<script type="text/javascript">
    $( function() {
       $('.selectpicker').selectpicker();
    })
</script>

它不起作用。但是当我输入

$('.selectpicker').selectpicker();

在 Chrome DevTools 的控制台中 - 选择对下拉列表的更改，它可以工作。

4

7 回答 7

19

您需要在 DOM 准备好后调用初始化函数。这通常作为$(document).ready()功能块的一部分来完成。

$(document).ready(function() {
   $('.selectpicker').selectpicker();
});

当您尝试通过控制台执行命令时，DOM 已经加载并可用。因此，呼叫有效。上面的代码示例应该类似地工作。

于 2013-07-30T09:09:09.050 回答
14

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

1-在所有者站点下载 zip 文件 - http://silviomoreto.github.io/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 文件，在结束 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>
于 2014-12-09T22:32:04.863 回答
2

在加载您的代码之前，请确保包含bootstrap-select.js或。bootstrap-select.min.js

<script src="path-to/js/bootstrap-select.min.js"></script>
于 2014-01-23T21:42:53.827 回答
2 
$(document).ready(function(){
    $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4   
    });
});

应该可以正常工作

于 2013-07-30T09:04:20.880 回答
2

会有一些原因使它不起作用。

原因 1：
如果 bootstrap-select.css 需要时间来加载，那么已经加载的 jquery 命令像 $(document).ready(function () {}) 将不知道这个函数，所以它会抛出一个错误。

解决方案：所以，为了克服这个问题，只需 $('your selector').selectpicker(); 在 html 代码末尾的脚本标记之间放弃，没有任何 jquery 就绪功能......肯定它会工作

于 2020-06-23T09:40:18.250 回答
0 
$(document).ready(function() {
    $('.selectpicker').selectpicker({
        style: 'btn-default',
        size: false
    });
});

有同样的问题，这（设置默认大小）帮助了我。没有设置菜单不显示。

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/

补充：也不要忘记bootsrap版本，我四处搜索发现这个插件在官方页面上可以与2.3.2 bootstrap版本一起使用，它有这样的链接。所以我觉得我也可以是麻烦。

于 2014-08-11T19:54:30.567 回答
-9

这对我有用，如果我删除它

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

好诡异...

于 2015-06-20T22:05:13.250 回答