select2 ajax 设置默认值,初始值的方法


Posted in Javascript onAugust 09, 2018

在做功能的时候需要修改数据, 修改数据时需要显示原始值。

但是在select2的时候 显示原始值是一个非常非常非常非常非常要命的难题。

研究了3个小时, 最后使用$.ajax 重新加载原始值, 并显示。

//two AJAX获取数据方式(每次请求)
 var $c_HospitalCode = $("#c_HospitalCode").select2({
 ajax: {
  type: 'GET',
  url: "/Report/AjaxOption/Ajax_LoadHospitalByKey",
  dataType: 'json',
  delay: 400,
  data: function (params) {
   return {
    key: params.term, // search term 请求参数
    page: params.page,
    MKORGCode: '@VModel.MKORGCode'
   };
  },
  processResults: function (data, params) {
   //重命名字段名
   for (var i = 0; i < data.length; i++)
   {
    data[i].id = data[i].Value;
    data[i].text = data[i].Name;
   }
   //params.page = params.page || 1;
   return {
    results: data//,//itemList
    //pagination: {
    // more: (params.page * 30) < data.length
    //}
   };
  },
  cache: true
 },

 placeholder: '请选择',//默认文字提示
 //placeholder: { id: "2", text: "text2" },
 language: "zh-CN",
 tags: true,//允许手动添加
 separator: ",", // 分隔符
 allowClear: true,//允许清空
 escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
 minimumInputLength: 3,//最少输入多少个字符后开始查询
 formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
 formatSelection: function formatRepoSelection(repo) { return repo.text; }//, // 函数用于呈现当前的选择 
 });

重点是下面的代码, 再次加载默认值. 赋值.

//再次加载默认值. 赋值. 
  $.ajax({
   url: "/Report/AjaxOption/Ajax_LoadHospitalByHospitalCodes", 
   data: { HospitalCodes: '@VModel.HospitalCode' },
   dataType:'json',
   success: function (data) { 
    for (var d = 0; d < data.length; d++) {
     var item = data[d]; 
     var option = new Option(item.Name, item.Value, true, true); 
     $c_HospitalCode.append(option);
    }

    $c_HospitalCode.trigger('change');//使用这个方法显示到select2上.
   } 
  });

主要是在select 控件添加上 option . 具体是ajax加载的还是直接后台用代码生成的. 都可以.. 最后用 $select2.trigger(‘change'); 渲染到界面上.. 就可以了。

以上这篇select2 ajax 设置默认值,初始值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
javascript 数组排序函数
Aug 20 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 #Javascript
微信小程序url传参写变量的方法
Aug 09 #Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 #Javascript
koa上传excel文件并解析的实现方法
Aug 09 #Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 #Javascript
vue-cli初始化项目中使用less的方法
Aug 09 #Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 #Javascript
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
AngularJS基础知识
2014/12/21 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python传递参数方式小结
2015/04/17 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python字符串连接方法分析
2016/04/12 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
python让函数不返回结果的方法
2020/06/22 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
珍惜水资源建议书
2014/03/12 职场文书
四年级学生评语大全
2014/04/21 职场文书
物流专业自荐信
2014/05/23 职场文书
岗位安全生产责任书
2014/07/28 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android