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 相关文章推荐
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
子页向父页传值示例
Nov 27 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
jquery中radio checked问题
Mar 16 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
Mar 24 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
javascript中的隐式调用
Feb 10 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
微信小程序签到功能
2018/10/31 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python模块搜索路径代码详解
2018/01/29 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
社会实践心得体会
2014/01/03 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
拉拉队口号
2014/06/16 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers