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类和继承 constructor属性
Mar 04 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
angularjs实现猜数字大小功能
May 20 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
JavaScript分页组件使用方法详解
Jul 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
文章推荐系统(三)
2006/10/09 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
图片自动更新(说明)
2006/10/02 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
python判断windows隐藏文件的方法
2014/03/21 Python
浅谈Python中的闭包
2015/07/08 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Django框架视图函数设计示例
2019/07/29 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
工厂见习报告范文
2014/10/31 职场文书
主持稿开场白
2015/06/01 职场文书
施工安全责任协议书
2016/03/23 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers