引导程序选择不起作用

我使用引导程序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 - 选择更改下拉，它的工作原理。

来源

2013-07-30 Fyodor Khruschov

得到任何错误？ –

也许它不起作用，因为您在加载selectpicker插件之前尝试执行selectpicker（）。你在哪里包括bootstrap-elect.js？ –

没有错误显示。当文档准备就绪时，我执行selectpicker，并且此脚本位于页面底部（在引导选择之后） –

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

应该正常工作

来源

2013-07-30 09:04:20

你需要调用初始化函数后的DOM已准备就绪。这通常是作为$(document).ready()功能块的一部分完成的。

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

当您通过控制台尝试命令时，DOM已经加载并可用。这样的通话起作用。上面的代码示例应该类似地工作。

来源

2013-07-30 09:09:09 Kami

'$（function（）{'等于'$（document）.ready（function（）{' –

如果我在运行selectpicker方法之前设置了3秒的时间间隔 - 它可以工作，我只需要在角度完全引导后启动此方法。 –

这个函数可能在jquery/boostrap包含之前被调用。确保它们在运行之前可用。另外，请检查您的控制台是否运行上述代码时生成的错误消息。 – Kami

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

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

来源

2014-01-23 21:42:53 Nima

这是我的问题 –

$(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版本的引导，在官方网页它有这样的链接。所以我认为我也可能会遇到麻烦。

来源

2014-08-11 19:54:30 user1954544

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> 
<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-09 22:32:04 zwitterion

-5

这个工作对我来说，如果我删除此

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

洙奇怪...

来源

2015-06-20 22:05:13

引导程序选择不起作用

回答

相关问题