我使用bootstrap multi-select,我想使用ajax更新流选项
要在init中填充我的多选
<select name="model" class="multiselect" multiple="multiple"> <? foreach ($sel_models as $mod) { ?> <option value="<?= $mod ?>" <?= ($mod == $params['model']) ? 'selected' : '' ?>><?= $mod ?></option> <? } ?> </select>
然后在事件上我想用以下ajax更新我的选项列表
我尝试使用rebuild方法,但是创建后不会触发下拉菜单
$.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); } });
使用萤火虫,我可以看到已生成列表,但选择后不会显示
在文档中,我可以阅读:
.multiselect(’setOptions’,options)用于在初始化multiselect之后更改配置。 与.multiselect(’rebuild’)结合使用时,这可能会很有用。
也许您不能通过最初的方式更改小部件数据。您应该以正确的方式使用setOptionsmethod。
setOptions
其他:用您的方式,也许您应该考虑销毁小部件.multiselect('destroy')并在以后重新创建它。
.multiselect('destroy')
评论后更新:
在文档中:(您已链接)
通过以下方式提供用于构建选择选项的数据:
var data = [ {label: "ACNP", value: "ACNP"}, {label: "test", value: "test"} ]; $("#multiselect").multiselect('dataprovider', data);
所以: 当您从ajax调用中获取数据时,您必须创建一个对象数组 (这是您想要的select中的选项) ,其格式为
var data = [ {label: 'option1Label', value: 'option1Value'}, {label: 'option2Label', value: 'option2Value'}, ... ]
创建对象数组时,只需调用该方法
$("#multiselect").multiselect('dataprovider', data);
数据是您的对象数组。
我希望我很清楚:/