车型选择三级联动插件

由于项目需要需要一个车型选择的三级联动插件，即先选择品牌，再选择车系，最后选择车型的联动，说起三级联动可能最常见的就是省市区然后三个select的这样的联动，如图

根据传回后台的参数来请求每一级的数据。最开始也是准备做成这种简单的联动的，奈何项目经理觉得这种太low了，要做得好看些，然后直接丢给我一个竞品的网站参考，说就做成这样的。

先选择品牌：

然后选择车系：

然后选择排量：

最后选择年份：

同样是联动，这样看起来的话逼格就不知道高了多少，而且每个品牌都有自己的logo也看起来很漂亮。

本来想图简单直接用他们的js的，不过数据要按别人的来不方便我们写入数据库，得我们后台自己写数据，那我就只有把竞品网站的代码down下来然后去读其中的js，最终花了2天时间还是做完了。话不多说，直接上js:

 

(function( $ ){
    $.fn.wxlsChooseCarSeries =function(options){
        //默认设置
        var settings={
            //激发对象
            this$:null,
            //本页面对象
            thisPage:null,
            //图片缓存版本号
            imgV:'?v=001',
            //点击选择车型的当前id值
            thisCarId:'',
            //点击选择品牌的当前名字
            thisBrandName:'',
            //点击车系的当前名字
            thisSeriesName:'',
            //当前选择车型名字
            thisTypeName:'',
            init:function(clickElement){
                settings.this$=clickElement;
                //拓展替换本插件的事件
                $.extend(true,settings,options);
                 //获取外部样式
                settings.getOutFile();
                //创建弹框对象
                settings.createOrGetHtml();
            },
            //获取外部样式
            getOutFile:function(){
            	//引入所需的css
            	require(['css!/src/components/wxls-carSeries/css/wxls-carSeries.css'],function(){
            		
            	});
            },
            ajaxFunction:function(keyId,savecallback){
            	$("#seriesMask",settings.thisPage).show();
            	$.ajax({
            		 type: "post",
            		 url: window.$context.$config.domain+"api/app/queryCarType.do",
            		 data:{
            		 	 keyId:keyId
            		 },
            		 dataType: "json",
            		 success:function(response){
            		 	if ($.isFunction(savecallback)) {
		                    savecallback.call(this, response);
		                    $("#seriesMask",settings.thisPage).hide();
		                }
            		 }
            	});
            },
            /* 缓存品牌信息*/
		    getBrandsList:function (callback) {
		        if (window.localStorage) {
		            var cacheBrands = window.localStorage.getItem("wxlscarselect-brands");
		            var cacheTime = window.localStorage["wxlscarselect-brands-timestamp"];
		            //缓存2小时
		            if (cacheBrands && cacheTime >= (new Date()).getTime() - 2 * 60 * 60 * 1000) {
		                callback(JSON.parse(cacheBrands));
		                return;
		            }
		        }
		        //自动加载品牌数据
		        settings.ajaxFunction(0, function (data) {
		            if (typeof data !== "undefined" && data.result==1) {
		                if (typeof  callback === "function") {
		                    if (window.localStorage) {
		                        window.localStorage["wxlscarselect-brands"] = JSON.stringify(data.listRow);
		                        window.localStorage["wxlscarselect-brands-timestamp"] = (new Date()).getTime();
		                    }
		                    callback(data.listRow);
		                }
		            }
		        });
		    },
            //创建弹框对象
            createOrGetHtml:function(createType){
	                    if($('body .dockElem>div[menuid]:visible>div:first #carSelect').length<=0){
		                    settings.thisPopo = $("<div id='carSelect' class='carselect-pop'>"
					            + "  <div class='carselect-close' ></div>"
					            + "      <div class='tab-nav'>"
					            + "          <div class='pop-content'>"
					            + "              <div class='tab-content active'>"
					            + "                  <ul class='carsel-progress clearfix'>"
					            + "                      <li id='cx1' class='head_div2'><span id='cxspan1' class='active'>1</span>选择品牌</li>"
					            + "                      <li id='cx2' class='head_div3'><span id='cxspan2'>2</span>选择车系</li>"
					            + "                      <li id='cx3' class='head_div5'><span id='cxspan3'>3</span>选择车型</li>"
					            + "                  </ul>"