2017-07-15 186 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 
        });