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 相关文章推荐
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
js闭包实例汇总
Nov 09 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
用PHP读注册表
2006/10/09 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
Json解析的方法小结
2016/06/22 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python读取oracle函数返回值
2016/07/18 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
护士演讲稿范文
2014/01/05 职场文书
电力安全事故反思
2014/04/27 职场文书
农民工讨薪标语
2014/06/26 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
刑事和解协议书范本
2014/11/19 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python