Bootstrap 选择下拉菜单是动态的吗？

Question

这是我的静态 HTML：

<select name="codici_transazioni" class="selectpicker" id="codici_transazioni">
    <option value="dsjkcbs">dsjkcbs - <i>Email, Facebook</i></option>
    <option value="scgwfsd" selected class="normaleSelect">scgwfsd - <i>Facebook</i></option>
    <option value="stdstyd">stdstyd - <i>Twitter</i></option>
</select>

这是一段取自模态上下文的代码。 我希望我的选择填充在 .php 文件上执行的 Ajax 的结果，该文件从我的 MySQL 数据库返回结果。

现在，所有的 Ajax 和 DB 部分都在工作，不是当我尝试在 Ajax 成功后通过 jQuery 填充这个 <select> 时，结果与上面的默认相同！

这是我的 jQuery：

$('#codici_transazioni').html("");
for (var i = received.length - 1; i >= 0; i--) {
    <other DOM loading>
     $('#codici_transazioni').append("<option value=" + temp_code_transaction + "> " + temp_code_transaction + "- <i>" + temp_type_transaction+ "</i></option>");
}

我通过 Chrome 注意到（所以在加载页面之后）在选择之后创建了一些 div。

我知道这是由 Bootstrap 完成的，但是在 Ajax 执行后如何重新加载此代码的创建以使选择下拉列表动态化？

Answer 1

如果您使用bootsrap-select，您还应该在将新选项附加到选择后运行 refresh() 方法

.done(function(data){
    'appending process'...
    $('#codici_transazioni').selectpicker('refresh');
})

Answer 2

使用 ajax：

$('#codici_transazioni').html('')
         $.ajax({
             url: '/path/to/phpfile',
             type: 'POST',
             dataType: 'json',
         })
         .done(function(data) {
             var output = '';
            $.each(data,function(index, el) {
                output += '<option class="results" value="'+el.valueToPass+'">'+el.valueToPass+'</option>'+

            });
            $('#codici_transazioni').append(output)
         })
         .fail(function() {
             console.log("error");
         })

我不能更具体，因为你没有发布 php 文件，也没有说你想以哪种方式触发结果。

注意：最好为现有选项提供一类“结果”或您喜欢的任何内容，这样您就可以在加载新选项之前清理现有选项。

使用地点：

$('#codici_transazioni').html('')

你可以这样做：

$('.results').remove()