在使用jQuery的bootstrap-multiselect插件时可能会遇到一个问题
就是想要动态的去更新select里的数据
比如我们要使一个id=select的选择框实现多选
那么先用ajax获得新数据后清空select再一个个拼成option
- $("#select").html("");
- for (var i = 0; i < json.length; i++) {
- $("#select").append("<option value='" + json[i].code + "'>" + json[i].name + "</option>");
- }
这时再重新调用一次multiselect()或使用multiselect("refresh")可能并没有任何效果
正确的姿势应该是先使用destroy破坏multiselect之后再重新构建
- $("#select").multiselect("destroy").multiselect({
- // 自定义参数，按自己需求定义
- nonSelectedText : '--请选择--',
- maxHeight : 350,
- includeSelectAllOption : true,
- numberDisplayed : 5
- });
最后代码如下
- function refreshMultiSelect() {
- $.ajax({
- type : "POST",
- url : url,
- data : data,
- dataType : "json",
- success : function(json) {
- $("#select").html("");
- for (var i = 0; i < json.length; i++) {
- $("#select").append("<option value='" + json[i].code + "'>" + json[i].name + "</option>");
- }
- $("#select").multiselect("destroy").multiselect({
- // 自定义参数，按自己需求定义
- nonSelectedText : '--请选择--',
- maxHeight : 350,
- includeSelectAllOption : true,
- numberDisplayed : 5
- });
- }
- });
- }
版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/qweasdqwe32/article/details/51722393
