流程上的Bootstrap Multiselect更新选项列表

Question

我使用bootstrap multi-select,我想用ajax更新flow上的选项

为了填充init我的多选我做

<select name="model" class="multiselect" multiple="multiple">
                <? foreach ($sel_models as $mod) { ?>
                    <option value="<?= $mod ?>" <?= ($mod == $params['model']) ? 'selected' : '' ?>><?= $mod ?></option>
                <? } ?>    
</select>  

然后在事件上我想用以下ajax更新我的选项列表

我试图使用重建方法但不会在创建后触发下拉列表

 $.ajax({
        type: 'post',
        url: "helper/ajax_search.php",
        data: {models: decodeURIComponent(brands)},
        dataType: 'json',
        success: function(data) {
            $('select.multiselect').empty();
            $('select.multiselect').append(
                    $('<option></option>')
                    .text('alle')
                    .val('alle')
                    );

            $.each(data, function(index, html) {
                $('select.multiselect').append(
                        $('<option></option>')
                        .text(html.name)
                        .val(html.name)
                        );
            });

            $('.multiselect').multiselect('rebuild')
        },
        error: function(error) {
            console.log("Error:");
            console.log(error);
        }
    });

使用firebug,我可以看到列表已生成但select不会显示

Answer 1

在文档中,我可以阅读:

.multiselect('setOptions',options)用于在初始化多选后更改配置.这可能与.multiselect('rebuild')结合使用.

也许您无法通过初始方式更改窗口小部件数据.以正确的方式你应该使用setOptions方法.

另外:按照你的方式,也许你应该考虑销毁你的小部件.multiselect('destroy')并在之后重新创建它.

评论后更新:

在文档中:(你已经链接)

通过以下方式提供用于构建选项选项的数据:

var data = [
    {label: "ACNP", value: "ACNP"},
    {label: "test", value: "test"}
];
$("#multiselect").multiselect('dataprovider', data);

所以: 当你从ajax调用中获取数据时,你必须创建一个对象数组(它是你想要的选项中的选项),格式如下

var data = 
[
    {label: 'option1Label', value: 'option1Value'},
    {label: 'option2Label', value: 'option2Value'},
    ...
]

创建对象数组后,只需调用该方法即可

$("#multiselect").multiselect('dataprovider', data);

数据是您的对象数组.

我希望我很清楚:/

Answer 2

作为multiselect('dataprovider',data)的替代方法,您可以使用jquery构建列表,与您在问题中的方式完全相同.您需要做的唯一更改是延迟重建,直到ajax请求完成.

var buildDrivers = $.getJSON('resources/orders/drivers.json', function(data) { 
   $.each(data, function(i, driver) {
      $('#toolbar select[name="drivers"]').append('<option>'+driver+'</option>');
   });
});
buildDrivers.complete(function() {
    $('.multiselect').multiselect('rebuild');
});

有关文档,请参阅http://api.jquery.com/jquery.getjson/