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类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
ES6下React组件的写法示例代码
May 04 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
小程序自定义日历效果
Dec 29 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
js绘制一条直线并旋转45度
Aug 21 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判断正常访问和外部访问的示例
2014/02/10 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
javascript实现留言板功能
2020/02/08 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
python软件都是免费的吗
2020/06/18 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
质检的岗位职责
2013/11/17 职场文书
2015年司法所工作总结
2015/04/27 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
MySQL数据库必备之条件查询语句
2021/10/15 MySQL