如何使用引导选择重建下拉菜单？
如何使用引导选择重建下拉菜单？
提问于 2018-09-13 02:43:30
我正在尝试在我的应用程序中实现bootstrap-select。我已经在我的应用程序中使用Bootstrap-twitter了。在系统中，我想要实现此功能的下拉菜单很少。在页面加载bootstrap-select将被触发，并从json文件填充下拉菜单。我有一个可以更新JSON文件的系统。在这种情况下，我重新加载JSON文件并调用函数再次加载json。问题是，在这种情况下，bootstrap-select会中断。我仍然可以单击并搜索选项，但同时所有选项都显示在选择输入字段的下方。下面是我的代码示例：
var appData = {
Buildings : [
{BLDGNAME : "Test 1", BLDGNUMBER : "2234"},
{BLDGNAME : "Test 2", BLDGNUMBER : "2534"},
{BLDGNAME : "Test 3", BLDGNUMBER : "2734"},
{BLDGNAME : "Test 4", BLDGNUMBER : "2294"}
]
}
$(document).ready(function(){
loadBuildings();
});
function loadBuildings(){
populateBuildings();
/* Just to show the way I import JSON data.
$.getJSON("JSON/Buildings.json?"+ new Date().getTime(), function(json) {
appData.Buildings = json;
}).done(function() {
populateBuildings();
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log( "Error: " + errorThrown);
});
*/
}
function populateBuildings(){
var fldBldg = $(".bldg-menu");
fldBldg.find("option:gt(0)").remove(); // Remove all but the first option in select menu.
$.each(appData.Buildings, function (key, value) {
fldBldg.append($("<option></option>").val(value.BLDGNUMBER).text(value.BLDGNAME));
});
fldBldg.selectpicker("refresh");
}
$("#add").on("click",addNew);
function addNew(){
appData.Buildings.push({BLDGNAME : "Test 5", BLDGNUMBER : "6234"});
loadBuildings();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form name="frmDemog" id="frmDemo">
<div class="form-group">
<label class="control-label" for="bldg"><span class="label label-primary">Building:</span></label>
<select class="form-control bldg-menu selectpicker" name="frmDemo_bldg" id="frmDemo_bldg" data-live-search="true" required>
<option value="">--Choose Building--</option>
</select>
</div>
</form>
<button type="button" name="add" id="add">Add New</button>
如果你运行上面的代码片段并点击add按钮，你会看到select菜单下面的所有选项。我不确定如何才能重新加载selectpicker()来防止这种行为。我试过使用selectpicker("refresh")，但没有用。如果有人知道解决这个问题的方法，请让我知道。谢谢。
回答 1
Stack Overflow用户
发布于 2018-09-13 03:58:50
这段代码选择两个元素:由Bootstrap-Select和SELECT生成的DIV。
var fldBldg = $(".bldg-menu");将其更改为：
var fldBldg = $("select.bldg-menu");修复代码：
var appData = {
Buildings : [
{BLDGNAME : "Test 1", BLDGNUMBER : "2234"},
{BLDGNAME : "Test 2", BLDGNUMBER : "2534"},
{BLDGNAME : "Test 3", BLDGNUMBER : "2734"},
{BLDGNAME : "Test 4", BLDGNUMBER : "2294"}
]
}
$(document).ready(function(){
loadBuildings();
});
function loadBuildings(){
populateBuildings();
/* Just to show the way I import JSON data.
$.getJSON("JSON/Buildings.json?"+ new Date().getTime(), function(json) {
appData.Buildings = json;
}).done(function() {
populateBuildings();
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log( "Error: " + errorThrown);
});
*/
}
function populateBuildings(){
var fldBldg = $("select.bldg-menu");
fldBldg.find("option:gt(0)").remove(); // Remove all but the first option in select menu.
$.each(appData.Buildings, function (key, value) {
fldBldg.append($("<option></option>").val(value.BLDGNUMBER).text(value.BLDGNAME));
});
fldBldg.selectpicker("refresh");
}
$("#add").on("click",addNew);
function addNew(){
appData.Buildings.push({BLDGNAME : "Test 5", BLDGNUMBER : "6234"});
loadBuildings();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<form name="frmDemog" id="frmDemo">
<div class="form-group">
<label class="control-label" for="bldg"><span class="label label-primary">Building:</span></label>
<select class="form-control bldg-menu selectpicker" name="frmDemo_bldg" id="frmDemo_bldg" data-live-search="true" required>
<option value="">--Choose Building--</option>
</select>
</div>
</form>
<button type="button" name="add" id="add">Add New</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52301567
复制相关文章
相似问题
腾讯云开发者
