引導程序選擇不起作用

我使用引導程序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

引導程序選擇不起作用

回答

相關問題