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 相关文章推荐
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
vue+moment实现倒计时效果
Aug 26 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将数据导入到Foxmail
2006/10/09 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Python数据类型详解(一)字符串
2016/05/08 Python
Python单例模式的两种实现方法
2017/08/14 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
财务经理岗位职责
2013/11/09 职场文书
2014植树节活动总结
2014/03/11 职场文书
交通安全横幅标语
2014/10/07 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
dubbo服务整合zipkin详解
2021/07/26 Java/Android
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS