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里使用Dom操作Xml
Jan 22 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 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
PHP 中的类
2006/10/09 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python基于locals返回作用域字典
2020/10/17 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
会计自荐信范文
2014/03/09 职场文书
积极向上的团队口号
2014/06/06 职场文书
相亲活动方案
2014/08/26 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
python 管理系统实现mysql交互的示例代码
2021/12/06 Python