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 相关文章推荐
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
JS中的BOM应用
Feb 02 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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
中国收音机工业发展史
2021/03/02 无线电
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
详解PHP中的PDO类
2015/07/06 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
php 数组元素快速去重
2017/05/05 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
2016/01/26 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
Unicode和Python的中文处理
2017/03/19 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
干部考核评语
2014/04/29 职场文书
维修工先进事迹
2014/05/29 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
小孩不笨观后感
2015/06/03 职场文书
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫