背景

Question

背景

我有以下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>标记后以及已经初始化之后，如何更新组合框？

Answer 1

经过一些研究和摆弄后，我发现以下代码可以刷新组合框。（使用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();
});

Answer 2

尝试使用以下代码刷新您的组合框：

$('select.location', 'select.tier').data('combobox','refresh');

希望这有帮助。

Bootstrap Combobox更新

背景

问题

问题

2 个答案: