在使用jQuery的bootstrap-multiselect插件時可能會遇到一個問題javascript
就是想要動態的去更新select裏的數據html
好比咱們要使一個id=select的選擇框實現多選java
那麼先用ajax得到新數據後清空select再一個個拼成optionajax
- $("#select").html("");
- for (var i = 0; i < json.length; i++) {
- $("#select").append("<option value='" + json[i].code + "'>" + json[i].name + "</option>");
- }
這時再從新調用一次multiselect()或使用multiselect("refresh")可能並無任何效果json
正確的姿式應該是先使用destroy破壞multiselect以後再從新構建bootstrap
- $("#select").multiselect("destroy").multiselect({
- // 自定義參數,按本身需求定義
- nonSelectedText : '--請選擇--',
- maxHeight : 350,
- includeSelectAllOption : true,
- numberDisplayed : 5
- });
最後代碼以下app
- 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
- });
- }
- });
- }