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

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

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

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

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

[javascript] view plain copy

$("#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之后再重新构建

[javascript] view plain copy

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

最后代码如下

[javascript] view plain copy

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

转载于:https://www.cnblogs.com/telwanggs/p/8582991.html

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

JS 编辑器动态添加select 鼠标划过显示下拉列表
核心知识点: 鼠标事件: onmousemove 鼠标移上 onmouseleave 鼠标移开 (注意区别开onmouseover和 onmouserout以及onmouseenter) co ...
js如何动态向 fileaddress: [fromurl]添加数据_N+增强能力系列(3) | 动态KV模块
编者按有很多客户问我们NGINX商业版与开源版本到底有什么区别,在官方网站有一个对比列表,但看完之后感觉好像还是没有get到其增强的精髓.为了更好的让大家了解NGINX Plus增强的能力及其应用场 ...
动态更新 AGS Cache
作者:Flyingis 提升ArcGIS Server访问速度最佳的方式是Cache,将所有图层切片保存在服务器,客户端请求时直接访问cache好的图片,这里分为两种情况,一是所有图层都做cache, ...
html中下拉列表监听事件,ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据...
本文将为您描述ExtJS 下拉框监听事件.日期选择器监听事件.实现动态给items添加删除数据,具体实现方法: 1.下拉框下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件 ...
PHP如何批量更新MYSQL中的数据
最近项目需要用到批量更新数据库里的数据,在网上找了一下这方面的例子,觉得这个还不错,分享给大家. 在这个业务里里面涉及到了更新两张数据表,那么大家是不是会想到非常简单,马上上代码 $sql = &qu ...
bootstrap获取下拉框数据_bootstrap动态调用select下拉框的实现方法
bootstrap动态调用select下拉框的实例代码 html代码: 填报部门: JS代码: /*获取下拉菜单*/ function showSel(){ $.ajax({ "type&q ...
js的动态加载、缓存、更新以及复用（四）
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...

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

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

最新文章

热门文章