select2 ajax 设置默认值,初始值的方法

 更新时间:2018年08月09日 14:39:18   作者:走错路的程序员  
今天小编就为大家分享一篇select2 ajax 设置默认值,初始值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在做功能的时候需要修改数据, 修改数据时需要显示原始值。

但是在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 设置默认值,初始值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Bootstrap一款超好用的前端框架

    Bootstrap一款超好用的前端框架

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,用于开发响应式布局、移动设备优先的 WEB 项目。接下来通过本文给大家分享Bootstrap一款超好用的前端框架,感兴趣的朋友一起看看吧
    2017-09-09
  • JavaScript localStorage使用教程详解

    JavaScript localStorage使用教程详解

    JavaScriptlocalStorage基本上是浏览器Window对象中的存储,您可以在中存储任何内容localStorage,localStorage及其相关的sessionStorage是 Web Storage API的一部分,我们将在本文详细了解这些,需要的朋友可以参考下
    2023-06-06
  • top.location.href 没有权限 解决方法

    top.location.href 没有权限 解决方法

    以前好像没有遇到这问题,也可能是没有在意吧,我的blog内容页都是有判断的,规则是,如果top.location不是内容页的话就跳到内容页
    2008-08-08
  • js使用对象直接量创建对象的代码

    js使用对象直接量创建对象的代码

    js使用对象直接量创建对象的代码...
    2007-09-09
  • 微信小程序实现导航栏和内容上下联动功能代码

    微信小程序实现导航栏和内容上下联动功能代码

    这篇文章主要介绍了微信小程序实现导航栏和内容上下联动功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • JavaScript对JSON数据进行排序和搜索

    JavaScript对JSON数据进行排序和搜索

    今天教给大家如何使用数组的方法来实现JSON数据进行排序和搜索功能,具体实例代码大家参考下本文吧
    2017-07-07
  • 在微信小程序中保存网络图片

    在微信小程序中保存网络图片

    这篇文章主要介绍了在微信小程序中保存网络图片,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 向大师们学习Javascript(视频与PPT)

    向大师们学习Javascript(视频与PPT)

    在开始之前,先与大家一起认识下这篇文章的主角,世界级的javascript大牛们:Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas。看名字也许挺陌生,但是如果你对javascript还算熟悉,一定不会对他们的作品陌生。
    2009-12-12
  • JavaScript实现绘制两个坐标之间的连线

    JavaScript实现绘制两个坐标之间的连线

    本文主要介绍了JavaScript实现绘制两个坐标之间的连线功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11

最新评论