添加选项到Bootstrap 4模式上的选择元素不起作用

Question

我在Bootstrap 4模式中有一个select元素：

                        <div class="form-group">
                        <label for="Ad" class="col-form-label">Ad</label><br />
                        <div class="row">
                            <div class=" col-md-6">
                                <select id="ADSelect" class="form-control" title="Choose one of the following origin..."></select>
                            </div>
                            <div class=" col-md-6">
                                <input type="text" class="form-control" placeholder="or add a new one" id="Ad">
                            </div>
                        </div>
                    </div>

我使用此函数将选项添加到select元素：

function GetAD() {

$('#ADSelect').empty();
$.ajax({
    type: "POST",
    url: 'Default.aspx/GetAD',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        if (data.d.length > 0) {
            for (var i = 0; i < data.d.length; i++) {
                var option = document.createElement("option");
                var select = document.getElementById("ADSelect");
                option.value = data.d[i];
                option.text = data.d[i];
                select.appendChild(option);
            }
        }
    },
    error: function (data) { alert(data.responseText); }
})

}

我在$（document）.ready（）上调用了这个函数，它运行得很好。当模态打开时，select元素的所有选项都没有问题。现在，在模态上输入一个新值，它将保存在数据库上并关闭模态。下次打开模态时，此新值应该在选择上。我试过这两个选项：

    $('#ComplaintModal').on('hidden.bs.modal', function () {
    GetAD();
})

$('#ComplaintModal').on('shown.bs.modal', function () {
    GetAD();
});

我可以看到函数被显示或隐藏的任何一个调用，但新值不存在，我也可以看到for循环数组的值。如果我刷新页面，那么新选项就在那里。如果我得到模态之外的选择元素一切正常。有任何想法吗？

这就是HTML在浏览器上的显示方式：

                        <select tabindex="-98" title="Choose one of the following origin..." class="form-control" id="ADSelect">
                        <option value="11">11</option>
                        <option value="44">44</option>
                        <option value="555">555</option>
                        <option value="test8">test8</option>
                        <option value="555555">555555</option>
                         <option value="TEST">TEST</option>
                        <option value="test4">test4</option>
                        <option value="test6">test6</option>
                        <option value="test7">test7</option>
                    </select>

谢谢！

Answer 1

我发现我使用的Bootstrap-select JQuery插件需要一个.selectpicker（'refresh'）来更新UI以匹配新状态。在删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

谢谢！