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下IE与FF兼容函数收集
Sep 17 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
js实现随机8位验证码
2020/07/24 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
详解Python各大聊天系统的屏蔽脏话功能原理
2016/12/01 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python对常见数据类型的遍历解析
2019/08/27 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
opencv python如何实现图像二值化
2020/02/03 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
搞笑获奖感言
2014/01/30 职场文书
学生请假条格式
2014/04/11 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
《窃读记》教学反思
2016/02/18 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript