Question

当我在浏览器中运行我的页面时，它不会显示任何<select>框...详细信息，当我将类更改为class="#"时，它会正常运行。无论如何，可以在代码源中看到选择框。

<!-- 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>

Answer 1

我遇到了类似的问题。通过对我的控制器的AJAX请求，返回了带有HTML的字符串，但我无法将其附加到DOM上。不过，经过检查，它出现在DOM中。原来，问题是selectpicker类。删除后，HTML被成功附加，并且该元素自然不起作用。经过一番搜索，我遇到了以下解决方案：

$('.selectpicker').selectpicker('refresh')

找到了here，并解释了为什么会发生这种情况。希望这会有所帮助。

干杯！

Answer 2

如果使用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 -->

Answer 3

这是我在class = selectpicker时解除select的解决方案。当我动态添加bootstrap select时出现了我的问题。经过一天的搜索，我找到了解决方案。我没有在网上看到这个解决方案。

附加选择项后必须使用.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
                   });

Answer 4

您需要在Bootstrap和bootstrap-select之前包含jQuery 。另外，您需要在所有Bootstrap文件之后内包含所有引导选择文件（在您的代码中，Bootstrap CSS之前应包含引导选择CSS）。

Answer 5

如果要动态填充<option>，我的建议是在完成附加部分后刷新.selectpicker $(".selectpicker").selectpicker('refresh');

Bootstrap Select - Selectpicker消失

5 个答案: