Bootstrap select 下拉菜单是动态的吗？

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>

这是一段取自模态上下文的代码。我希望我的 select 填充 Ajax 对 .php 文件执行的结果，该文件 returns 来自我的 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 注意到（在页面加载之后）在 select.

之后创建了一些 div

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

Answer 1

使用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");
         })

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

注意：最好为现有选项提供 'results' 的 class 或任何您喜欢的选项，这样您就可以在加载新选项之前清除现有选项。

到位使用：

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

你可以这样做：

$('.results').remove()

Answer 2

如果您正在使用 bootsrap-select，您还应该运行在将新选项附加到 select

之后使用 refresh() 方法

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

Bootstrap select 下拉菜单是动态的吗？

Bootstrap select dropdown made dynamic?

jquery

select

bootstrap-modal

bootstrap-select