Question

我正在使用bootstrap 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的控制台中 - 选择更改为下拉列表并且有效。

Answer 1

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

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

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

Answer 2

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

1 - 在所有者网站下载zip文件 - http://silviomoreto.github.io/bootstrap-select/

2-CSS，在head标签内 - ＆gt; 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>
<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>

Answer 3

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

应该可以正常工作

Answer 4

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

<script src="path-to/js/bootstrap-select.min.js"></script>

Answer 5

出于某些原因，它将无法正常运行。

原因1：
如果bootstrap-select.css需要花费一些时间来加载，那么已加载的jquery命令（例如$（document）.ready（function（）{}））将不知道该函数，因此将引发错误。

解决方案：因此，为了克服这个问题，只需给$('your selector').selectpicker(); 在html代码末尾的script标签之间，没有任何jquery ready函数...确保它可以正常工作

Answer 6

$(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版本，它有这样的链接。所以我觉得我也可能遇到麻烦。

Answer 7

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

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

太奇怪......

Bootstrap-select不起作用

7 个答案: