使用select2下拉框ajax加载数据时,编辑赋值的方法
2018-01-23 13:48
225 查看
最近在做一个项目,项目地址: https://github.com/wangyuanjun008/wyj-parent.git
使用bootstrap select2下拉框插件,ajax从后台加载数据,保存编辑后,不知道怎么为下拉框赋值,下拉框代码如下:
通过查询api知道,在select4.0之后可以使用 $(“select”).val(“id”).trigger(“change”);为下拉框赋值
你会发现下拉框中的数据是点击之后才会加载数据的,使用如上方法 ‘id’是未知的,原因是在编辑的时候下拉框的数据还没有加载出来
解决方法如下:
在页面加载的时候就加载下拉框数据,在编辑时就能为其赋值,问题解决!
使用bootstrap select2下拉框插件,ajax从后台加载数据,保存编辑后,不知道怎么为下拉框赋值,下拉框代码如下:
<label class="col-sm-1 control-label">使用状态:</label> <select id="sel_status" name="status" class="col-sm-3 form-control select2"></select> $("#sel_status").select2({ placeholder : "--请选择--", dropdownParent : $("#myModal"), allowClear : true, width : 150, ajax : { url : '${ctx}/dataDict/getData?groupCode='+'yesOrNo', dataType : 'json', type : 'get', data: function (params) { return { q: params.term, // search term 请求参数 page: params.page }; }, processResults: function (data, params) { params.page = params.page || 1; return { results: data,//itemList pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true } });
通过查询api知道,在select4.0之后可以使用 $(“select”).val(“id”).trigger(“change”);为下拉框赋值
你会发现下拉框中的数据是点击之后才会加载数据的,使用如上方法 ‘id’是未知的,原因是在编辑的时候下拉框的数据还没有加载出来
解决方法如下:
function getDataByGroupCode(groupCode){ var dataStore; $.ajax({ dataType : 'json', type : 'get', url : model.dataURL+groupCode, async : false, success: function(data){ dataStore=data; } }); return dataStore; } var dataStore = getDataByGroupCode('yesOrNo'); $("#sel_status").select2({ placeholder : "--请选择--", dropdownParent : $("#myModal"), allowClear : true, width : 150, minimumResultsForSearch: -1, data : dataStore });
在页面加载的时候就加载下拉框数据,在编辑时就能为其赋值,问题解决!
相关文章推荐
- DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
- 【jQuery】使用ajax()方法加载服务器数据
- 关于 ie 下使用 iframe 加载子页面时,子页面ajax数据能进入success方法,但是数据为空的问题
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- 使用ajax从数据库动态加载下拉框(select)数据,可编辑下拉框。
- 使用ajax()方法加载服务器数据
- 使用ajax()方法加载服务器数据
- 在JQuery中可以使用get,post和ajax方法给服务器端传递数据
- 加载大量的xml数据 使用压缩方法解决(当然较小时也可以压缩)
- 使用ajax加载的页面中包含的javascript的解决方法
- jQuery UI Autocomplete 使用 ajax 方法传输Json数据出现乱码问题的解决
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 使用AJAX时错误:未能加载文件或程序集 system.web.extensions解决方法
- 客户端 使用XML DOM加载json数据的方法
- 使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法:服务器端和客户端数据类型的自动转换:复杂类型
- jqury+ajax每秒向后台发送请求数据然后返回页面(包括jqruy页面加载完毕才执行方法)
- 使用Ajax动态加载数据
- AJAX学习基础:简单介绍数据岛使用方法
- 使用ajax加载的页面中包含的javascript的解决方法