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能够填充在.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（ ''）

你可以这样做：

$（”。结果）。除去（）

Bootstrap选择下拉动态了吗？

2 个答案: