【问题标题】：bootstrap-select - dropdown disappeares when i add selectpicker class to the select tagbootstrap-select - 当我将 selectpicker 类添加到选择标签时，下拉菜单消失
【发布时间】：2017-07-15 18:17:40
【问题描述】：
当我将selectpicker 类添加到我的选择标签并在浏览器中运行我的页面时，它不会显示任何<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>
【问题讨论】：
标签：
javascript
html
twitter-bootstrap
bootstrap-select
【解决方案1】：
我遇到了类似的问题。通过对我的控制器的AJAX 请求，返回了带有HTML 的字符串，但我无法将其附加到DOM。尽管如此，它还是在检查后出现在DOM 中。原来问题出在selectpicker 类。删除后，HTML 已成功附加，并且该元素自然没有按预期运行。
经过一番搜索，我遇到了以下解决方案：
$('.selectpicker').selectpicker('refresh')
找到它here 并解释为什么会发生这种情况。
希望这会有所帮助。
干杯！
【解决方案2】：
将您的 JQuery 脚本放在您的 Bootstrap 脚本之前。
它为我修好了。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw=="crossorigin="anonymous" referrerpolicy="no-referrer"></script>
【解决方案3】：
如果您使用 bootstrap 3.3.7，则必须在 bootstrap 插件之前包含 JQuery。
像这样
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<!-- other javascript inludes follows -->
【解决方案4】：
这是我在 class=selectpicker 时使选择消失的解决方案。当我动态添加引导选择时出现了我的问题。经过一天的搜索，我找到了解决方案。我没有在网上看到这个解决方案。
附加选择项后必须使用.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
});
【解决方案5】：
你需要在之前加入 jQuery Bootstrap 和 bootstrap-select。此外，您需要在所有 Bootstrap 文件之后包含所有 bootstrap-select 文件（在您的代码中，您在 Bootstrap CSS 之前包含 bootstrap-select CSS）。
【解决方案6】：
如果您要动态填充<option>，我的建议是在完成附加部分后刷新.selectpicker
$(".selectpicker").selectpicker('refresh');