【原创】一个非常简洁基于jquery原创无限级联ajax异步请求下拉框插件

2019独角兽企业重金招聘Python工程师标准>>>

一个基于jquery下拉框插件：

1. 支持无限级联

2. ajax异步请求

/**

 * 无限级联异步加载下拉框插件

 * author：vakinge

 * */

;(function($) {

 // 异步加载下拉框

 $.fn.asnycSelect = function(options) {

  return this.each(function(){

     new asnycSelect().builder($(this),options);

  });

 };

 function asnycSelect(){

  this.settings = {

   linkage:false,//是否联动菜单

   actionUrl:null,//请求地址

   valtarget:null,//值输出元素（选择的值最终保存在）

   params:'',//初始查询参数：多个用“-”隔开

   level: 1,

   maxlevel:null,//最大级 默认：2

  };

  this.builder = function($target,options){

      options = $.extend(this.settings,options);

   var $subSelect,settings = this.settings;

   $target.attr("level",settings.level).empty();

   $.getJSON(settings.actionUrl + settings.params, function(data){

      if(!data || !data.opts)return;

      $target.append("<option value=''>请选择</option>");

      data = data.opts;

      for(var i in data){

       $target.append("<option value='"+i+"'>"+data[i]+"</option>");

      }

      var linkNext = settings.linkage && settings.maxlevel > settings.level;

      if(linkNext){

       $subSelect = $target.clone().empty().insertAfter($target);

      }

      $target.on('change',function(){

       $(settings.valtarget).val($(this).val());

       if(!linkNext)return;

       options.level = parseInt($(this).attr("level")) + 1;

       options.params = $(this).val();

       $subSelect.asnycSelect(options);

      });

   });

   };

 };    

})(jQuery);

使用例子：

$('.J_area_select').asnycSelect({

     linkage:true,

     actionUrl:'http://www.smhaochi.com/',

     valtarget:'#selecdArea',

     params:'0',

     maxlevel:2

    });

    $('.J_type_select').asnycSelect({

     linkage:true,

     actionUrl:'http://www.unetzone.com/',

     valtarget:'#selecdType',

     params:'0',

     maxlevel:2

    });

 

转载于:https://my.oschina.net/vakinge/blog/221480