2017-07-15 244 views
0

當我在瀏覽器中運行我的頁面時,它不顯示任何<select>框......詳細信息,當我將類更改爲class="#"時,它運行正常。無論如何,可以看到代碼源中的選擇框。Bootstrap Select - Selectpicker消失

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/css/bootstrap-select.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/bootstrap-select.min.js"></script> 

<!-- (Optional) Latest compiled and minified JavaScript translation files --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.3/js/i18n/defaults-*.min.js"></script> 



<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</head> 
<body> 

<select class="selectpicker" data-live-search="true" name="cidade"> 

<option value="test1">Test 1</option> 
<option value="test2">Test 2</option> 
<option value="test3">Test 3</option> 
</select> 

</body> 
+0

加入jQuery的,以及 –

回答

0

如果使用bootstrap 3.3.7,則必須在引導程序插件中包含JQuery。 像這樣

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> 
<!-- other javascript inludes follows --> 
0

這裏是我的選擇,當類= selectpicker的disappering解決方案。我動態添加引導選擇時出現問題。經過一天的搜索,我發現我的解決方案。我沒有在網上看到這個解決方案。

添加選擇項後必須使用.selectpicker命令..下面是我的代碼。

我希望這個解決方案適用於大家..

var selectLocaleList = document.createElement("select"); 
selectLocaleList.setAttribute("id", "myLocaleSelect"); 
selectLocaleList.setAttribute("class", "form-control"); 
selectLocaleList.setAttribute("data-style", "btn-danger"); 
//Create and append the options 
$(selectLocaleList).append('<option value="tr">Turkish</option>'); 
$(selectLocaleList).append('<option value="en">English</option>'); 
//This is the append code below that adds the select to the page. And this code must be ovet the .selectpicker 
modalBody.appendChild(selectLocaleList); 
//And this is the .selectpicker after the append.. 
$(selectLocaleList).selectpicker('val', settings.locale) 
        .on('change', function() { 
         // Some functions 
        });