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复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
Vue router配置与使用分析讲解
Dec 24 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
javascript比较文档位置
2008/04/08 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python端口扫描系统实现方法
2014/11/19 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
2014年国庆标语
2014/06/30 职场文书
市场营销工作计划书
2014/09/15 职场文书
2014年城管工作总结
2014/11/20 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
小学校长个人总结
2015/03/03 职场文书
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript