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学习点滴 call、apply的区别
Oct 22 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
基本DOM节点操作
Jan 17 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 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调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
js读取cookie方法总结
2014/10/31 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序实现点击卡片 翻转效果
2019/09/04 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
行政部岗位职责范本
2014/03/13 职场文书
气象学专业个人求职信
2014/03/15 职场文书
校庆接待方案
2014/03/18 职场文书
法制宣传月活动总结
2014/04/29 职场文书
2014年租房协议书范本
2014/10/30 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
雷锋的观后感
2015/06/10 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
小学远程教育工作总结
2015/08/13 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL