流程上的Bootstrap Multiselect更新选项列表 [英] Bootstrap Multiselect update option list on flow

问题描述

我使用bootstrap 多选，我想用ajax更新流的选项

要在init上填充我的多选我做

 <选择名称=modelclass =multiselectmultiple =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'）
}，
错误：函数（错误）{
 console.log（错误： ）; 
 console.log（错误）; 
} 
}）; 
  

使用firebug，我可以看到列表已生成，但在select上将不会显示

解决方案

在我可以阅读的文档中：

.multiselect（ 'setOptions'，options）
用于在初始化多选后更改配置。这可能与.multiselect（'rebuild'）结合使用。

也许你无法按照初始方式更改小部件数据。以正确的方式，您应该使用 setOptions 方法。

另外：按照自己的方式，也许你应该考虑销毁你的小部件 .multiselect（'destroy'）和之后再次创建。

评论后更新：

在文档中： （您已链接）

提供以下列方式构建select选项的数据：

  var data = [
 {label：ACNP，value：ACNP}，
 {label： test，值：test} 
]; 
 $（＃multiselect）。multiselect（'dataprovider'，data）; 
  

所以：
从ajax电话中获取数据时，你必须创建一个对象数组（它是你想要的选项中的选项），格式为

  var data = 
 [
 {label：'option1Label'，value：'option1Value'}，
 {label：'option2Label'，value：'option2Value'}， 
 ... 
] 
  

创建对象数组后，只需要调用方法

  $（＃multiselect）。multiselect（'dataprovider'，data）; 
  

数据是你的对象数组。

<我希望我很清楚：/

I use bootstrap multi-select and I want to update options on flow with ajax

To populate on init my multiselect I do

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

then on event I would like to update my option list with the following ajax

I was trying to use the rebuild method but won't fire the drop-down after creation

 $.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);
        }
    });

With firebug I can see that the list is generated but on select won't show up

解决方案

In the doc I can read :

.multiselect('setOptions', options) Used to change configuration after initializing the multiselect. This may be useful in combination with .multiselect('rebuild').

Maybe you can't change your widget data by your initial way. In a correct way you should use setOptions method.

Else : With your way, maybe should you think about destroy your widget .multiselect('destroy') and create it again after.

Update after comment :

In the doc : ( you've linked )

Provides data for building the select's options the following way:

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

So : When you get data from your ajax call, you have to create an array of objects ( it's the options in the select you want to have ) with the format like

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

When your objects array is created, then you just have to call the method

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

Where data is your array of objects.

I hope I'm clear :/

这篇关于流程上的Bootstrap Multiselect更新选项列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！