背景
我有以下 HTML 文档:
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<!-- Plugins CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-combobox.css">
</head>
<body class="one-page fixed-header">
<div class="page-box">
<div class="page-box-content">
<h3>Form 1</h3>
<div class="content">
<div class="combobox-container" id="employee-name-box">
<label for="addScheduleLoc">Location: <span class="required">*</span></label>
<select class="form-control combobox location" name="addScheduleLoc" id="addScheduleLoc" required>
<option value selected="selected">---Select Location---</option>
</select>
</div>
<div class="combobox-container" id="employee-name-box">
<label for="addScheduleTier">Tier: <span class="required">*</span></label>
<select class="form-control combobox tier" name="addScheduleTier" id="addScheduleTier" required>
<option value selected="selected">---Select Tier---</option>
</select>
</div>
</div>
<hr>
<h3>Form 2</h3>
<div id="changeScheduleModalBody" class="content">
<div class="combobox-container" id="employee-name-box">
<label for="chScheduleLoc">Location: <span class="required">*</span></label>
<select class="form-control combobox location" name="chScheduleLoc" id="chScheduleLoc" required>
<option value selected="selected">---Select Location---</option>
</select>
</div>
<div class="combobox-container" id="employee-name-box">
<label for="chScheduleTier">Tier: <span class="required">*</span></label>
<select class="form-control combobox tier" name="chScheduleTier" id="chScheduleTier" required>
<option value selected="selected">---Select Tier---</option>
</select>
</div>
</div>
</div>
<!-- .page-box-content -->
</div>
<!-- .page-box -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-combobox.js"></script>
<script src="js/testJavascript.js"></script>
</body>
</html>
有一个对服务器的 AJAX 调用，该调用在页面加载后检索一些数据并将数据放入变量中并用于填充组合框。有多个组合框应包含相同的信息(例如，所有具有“位置”类的组合框应包含相同的位置列表)。我在下面的 javascript 文件中模拟了这一点。请注意，组合框的初始化必须首先发生，因为我可能需要更新关联的 <select> 的内容。组合框初始化后的元素。
//file: js/testJavascript.js
var options = {
locations: "<option id='1'>London</option><option id='2'>Los Angeles</option><option id='3'>Sydney</option>",
tiers: "<option id='1'>Upper</option><option id='2'>Middle</option><option id='3'>Lower</option>"
}
$(document).ready(function(){
$('.combobox').combobox({
bsVersion: '3'
}); //This statement cannot be moved.
$('select.location').append(options.locations);
$('select.tier').append(options.tiers);
});
问题
我遇到的问题是在我将选项附加到 <select> 之后元素，组合框不会更新以显示最新信息。我意识到如果我打电话$('.combobox').combobox({...});添加选项后，组合框将正确。但我可能需要在组合框第一次初始化后更新组合框中的信息。
问题
将选项添加到相应的 <select> 后，如何更新组合框标签以及它们已经初始化之后？
最佳答案
经过更多研究和摆弄，我发现以下代码可以刷新组合框。 (使用issue shown here)
$('select.location').each(function(){ //need to run in .each to refresh all the elements
$(this).data('combobox').refresh();
});
$('select.tier').each(function(){
$(this).data('combobox').refresh();
});
关于javascript - Bootstrap 组合框更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34533314/