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

前端之家收集整理的这篇文章主要介绍了Select2插件 简化 远程加载下拉选项前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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
        })

猜你在找的Ajax相关文章