bootstrap-multiselect.js如何动态更新select里的数据

偏执的太偏执、 2022-04-10 11:50 428阅读 0赞

在使用jQuery的bootstrap-multiselect插件时可能会遇到一个问题

就是想要动态的去更新select里的数据

比如我们要使一个id=select的选择框实现多选

那么先用ajax获得新数据后清空select再一个个拼成option

**\[javascript\]** [view plain][] [copy][view plain]

1.  $("\#select").html(""); 
2.  for (var i = 0; i < json.length; i++) \{ 
3.  $("\#select").append("<option value='" + json\[i\].code + "'>" + json\[i\].name + "</option>"); 
4.  \}

这时再重新调用一次multiselect()或使用multiselect("refresh")可能并没有任何效果

正确的姿势应该是先使用destroy破坏multiselect之后再重新构建

**\[javascript\]** [view plain][] [copy][view plain]

1.  $("\#select").multiselect("destroy").multiselect(\{ 
2.  // 自定义参数，按自己需求定义 
3.  nonSelectedText : '--请选择--', 
4.  maxHeight : 350,
5.  includeSelectAllOption : true, 
6.  numberDisplayed : 5
7.  \});

最后代码如下

**\[javascript\]** [view plain][] [copy][view plain]

1.  function refreshMultiSelect() \{ 
2.  $.ajax(\{
3.  type : "POST", 
4.  url : url,
5.  data : data,
6.  dataType : "json", 
7.  success : function(json) \{ 
8.  $("\#select").html(""); 
9.  for (var i = 0; i < json.length; i++) \{ 
10. $("\#select").append("<option value='" + json\[i\].code + "'>" + json\[i\].name + "</option>"); 
11. \}
12. $("\#select").multiselect("destroy").multiselect(\{ 
13. // 自定义参数，按自己需求定义 
14. nonSelectedText : '--请选择--', 
15. maxHeight : 350,
16. includeSelectAllOption : true, 
17. numberDisplayed : 5
18. \});
19. \}
20. \});
21. \}

[view plain]: http://blog.csdn.net/qweasdqwe32/article/details/51722393#