Fatal编程技术网

Twitter bootstrap 引导选择不工作

twitter-bootstrap

Twitter bootstrap 引导选择不工作,twitter-bootstrap,Twitter Bootstrap,我正在使用bootstrap 2.3.2，并希望实现类似下拉菜单的元素。github中有一个解决方案： 我的代码： <select class="selectpicker"> <option>1</option> <option>2</option> </select> <script type="text/javascript"> $( function() { $('.

我正在使用bootstrap 2.3.2，并希望实现类似下拉菜单的元素。github中有一个解决方案：

我的代码：

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

<script type="text/javascript">
    $( function() {
       $('.selectpicker').selectpicker();
    })
</script>
在ChromeDevTools的控制台中，选择更改下拉列表，它就可以工作了

$(document).ready(function(){
    $('.selectpicker').selectpicker({
        style: 'btn-info',
        size: 4   
    });
});
应该可以正常工作

您需要在DOM就绪后调用初始化函数。这通常作为
$（document）.ready（）功能块的一部分完成


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



当您试图通过控制台执行该命令时，DOM已经加载并可用。因此，电话是有效的。上面的代码示例应该也能起到类似的作用。
在加载代码之前，请确保包含
bootstrap select.js
或
bootstrap select.min.js


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






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


默认情况下，大小选项设置为“自动”。当“大小”设置为“自动”时，菜单将始终打开，以显示窗口允许的尽可能多的项目，而不会被切断。将大小设置为false以始终显示所有项目。还可以使用数据大小属性指定菜单的大小。

增加：

也别忘了bootsrap版本，我四处搜索，发现这个插件与官方页面上的2.3.2 bootstrap版本兼容，它有这样的链接。所以我想我也会有麻烦。
一年后，我也有同样的问题。这对我很有用：



1-在所有者站点下载zip文件-

2-CSS，内部头部标签->2文件


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




芥末
番茄酱
喜欢
$（文档）.ready（函数（）{
$（'.selectpicker'）.selectpicker（）；
});

如果我删除此项，此项对我有效


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







太奇怪了…
有些原因会使它无法工作。


理由1：


如果bootstrap-select.css需要时间加载，那么已经加载的jquery命令，如$（document）.ready（function（）{}）将不知道该函数，因此它将抛出一个错误

解决方案：
因此，为了克服这个问题，只需给
$（“您的选择器”）.selectpicker（）

在html代码末尾的脚本标记之间，没有任何jquery就绪函数。。。当然它会工作
可能因为在加载selectpicker插件之前尝试执行selectpicker（），所以它不会工作。您在哪里包括bootstrap-elect.js？没有显示错误。当文档准备就绪时，我执行selectpicker，并且该脚本位于页面底部（在引导选择之后）
$（function（）{
等于
$（document）.ready（function（）中）{
如果我在运行selectpicker方法之前将间隔设置为3秒-它可以工作。我只需要在角度完全引导后启动此方法。很可能在jquery/boostrap包含之前调用了此函数。请确保在运行此方法之前这些函数可用。此外，请检查控制台，查看运行时生成的错误消息上面的代码是运行的。这就是我结尾的问题。谢谢，它起作用了。实际上我把
$（'your selector'）.selectpicker（）；
放在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>



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