加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Select2插件 简化 远程加载下拉选项

发布时间:2020-12-16 00:45:47 所属栏目:百科 来源:网络整理
导读:select2是强大的select插件 能满足各种变态需求 这个扩展能简化远程加载选项的代码 /** 文 件 名: select2-easyPlugin.java* 版 权: Copyright 2012-2013,All rights reserved* 描 述: 描述* 创 建 人:王骁然 wangxiaoran@itany.com* 创建时间: 13-12-11 下午
select2是强大的select插件 能满足各种变态需求 这个扩展能简化远程加载选项的代码
/*
* 文 件 名: select2-easyPlugin.java
* 版 权: Copyright 2012-2013,All rights reserved
* 描 述: <描述>
* 创 建 人:王骁然  wangxiaoran@itany.com
* 创建时间: 13-12-11 下午5:04
* 简化的select2 使用必须先引入select2.js
*/


$.fn.select2Remote = function(options)
{
  var opts = $.extend({},$.fn.select2Remote.defaults,options);
  this.select2({
    allowClear:true,placeholder: opts.blankMsg,minimumInputLength:opts.minLength,id:function(obj){return obj[opts.valueField]},ajax: {
      url: opts.url,dataType: 'json',quietMillis: opts.delay,data: function (term,page) {return {q: term};},results: function (data,page) { return {results: data};}
    },initSelection: function(element,callback) {
      var id=$(element).val();
      if (id!=="") {
        $.ajax(opts.initUrl,{
          data: {
            q:id
          },dataType: "json"
        }).done(function(data) { callback(data); });
      }
    },formatResult: function(obj){return obj[opts.textField]},formatSelection:function(obj){return obj[opts.textField]},dropdownCssClass: "bigdrop",escapeMarkup: function (m) { return m; }
  });
}








$.fn.select2Remote.defaults = {
  blankMsg: "请输入",minLength: 2,url:'',initUrl:'',delay:1000,valueField:'id',textField:'text'
}


使用方法

 $('#selectCenter').select2Remote({
            blankMsg:'请输入上级专业名称',//这里填写空选项时显示的文字
            url:'url',//远程加载的url
            initUrl:'initurl',//初始化url
            valueField:'id',//value名   在vo中对应id的属性名
            textField: 'text'//显示的text
        })

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读