当前位置:jQuery学习 > jQuery > jQuery省市区三级联动

jQuery省市区三级联动

时间:2014-05-19QQ群:116983258

jQuery实现省、市、区三级联动的代码网上应该已经挺多了,今天群里一名成员投了篇关于省、市、区三级联动的实现代码,不同的一点是他将代码片段封装成了jQuery插件。虽然文章中没有涉及到和后台的交互,但这不影响我们的学习。

(function($){
$.fn.citySelect = function(options) {  
 	var defaults = {  
 		setId : ['#Province' , '#City' , '#Area'],                //默认id
 		stval : ['请选择省份' , '请选择城市' , '请选择地区'],     //默认值
 		czemt : 'i',                        					  //存值元素
 		inpvt : 'input[name^="cho"]',                     		  //存值文本框	
 		intva : true											  //初始化所有下拉默认确定
 	},
 		opts = $.extend(defaults, options),
 			_setId = opts.setId,
 			_stval = opts.stval,
 			_czemt = opts.czemt,
 			_inpnt = opts.inpvt,
 			len = _setId.length;
 	$.fn.removelist = function(options){  //清空
 			var removdefa = {  
 			    removeAll : false,
 			    thisindex : 0
 			},
 		optremove = $.extend(removdefa, options);  
 	var $_removebox = $(this),
 		$_listall = $('ul li' , $_removebox),
 		$_listfirst = $('ul li:first' , $_removebox),
 		$_listsib = $('ul li:gt(0)' , $_removebox),
 		$_vala = $(_czemt , $_removebox),
 		$_valb = $(_inpnt , $_removebox);
 		if(optremove.removeAll){
 			$_listall.remove();
 		}else{
 			$_listsib.remove();
 		}
 		$_vala.text(_stval[optremove.thisindex]);
 		$_valb.val(_stval[optremove.thisindex]);
 		return this;
 	};
 	$.fn.appendlist = function(options){  //添加
 			var appdefa = {  
 		  	    theindex : '0'
 			},
 		optapp = $.extend(appdefa, options);
 		var $_appendbox = $(this),
 			$_listbox = $('ul' , $_appendbox),
 			appendArray = dsy.Items[optapp.theindex],
 			appList = '';
 		if(typeof(appendArray) == "undefined") return false; //如果不存在当前对象返回false
 		for(var i = 0; i<appendArray.length;i++){
 			appList += '<li><a href="javascript:void(0)" alt="'+appendArray[i]+'">'+appendArray[i]+'</a></li>';
 		}
 		$_listbox.append(appList);
 		appList = '';
 	};
 	function slide(str){ //下拉事件
 		var oID = $(str),
 		    oClass = 'active',
 		    oList = $('ul' , oID),
 		    closed;
 		oID.click(function(){
 		    $(this).toggleClass(oClass);
 		    oList.stop(true,true).slideToggle();
 		});
 		closed = function(){
 		    oID.removeClass(oClass);
 		    oList.stop(true,true).slideUp();
 		}
 		$("body").click(function(e){
 		    if(!$(e.target).is(str+" *")){
 		        closed();
 		    }
 		});
 	};
 	$.fn.liClick = function(){
 			var $_liA = $('li' , _setId[0]),
 				$_liB = $('li' , _setId[1]),
 				$_liC = $('li' , _setId[2]),
 				indA,indB,indC;
 			$('li' , _setId[0]).live('click' , function(){ //省点击事件
 				indA = $('li' , _setId[0]).index(this) - 1;
 				var   _valA = $('a' , this).attr('alt'), 
 					_emeltA = $(_czemt , _setId[0]),
 					_inputA = $(_inpnt , _setId[0]);
 				_emeltA.text(_valA);
 				_inputA.val(_valA);
 				$(_setId[1]).removelist({thisindex : 1});
 				$(_setId[1]).appendlist({theindex:'0_'+indA});
 				$(_setId[2]).removelist({thisindex : 2});
 				return indA;
 			});
 			$('li' , _setId[1]).live('click' , function(){ //市点击事件
 				indB = $('li' , _setId[1]).index(this) - 1;
 				var   _valB = $('a' , this).attr('alt'), 
 					_emeltB = $(_czemt , _setId[1]),
 					_inputB = $(_inpnt , _setId[1]);
 				_emeltB.text(_valB);
 				_inputB.val(_valB);
 				$(_setId[2]).removelist({thisindex : 2});
 				$(_setId[2]).appendlist({theindex:'0_'+indA+'_'+indB});					
 				return indB;
 			});
 			$('li' , _setId[2]).live('click', function(){ //区点击事件
 				indC = $('li' , _setId[2]).index(this);
 				var   _valC = $('a' , this).attr('alt'), 
 					_emeltC = $(_czemt , _setId[2]),
 					_inputC = $(_inpnt , _setId[2]);
 				_emeltC.text(_valC);
 				_inputC.val(_valC);					
 				return indC;
 			});	
 	};
 	function show(obj){   //大按钮事件
 		$(obj).toggleClass('active').find('ul').slideToggle();
 	}
 	if(opts.intva){
 		for(var i = 0 ; i < len; i++) {  //初始化默认值所有值
 			$(_setId[i]).removelist({thisindex : i});
 			slide(_setId[i]);
 		};			
 	}
 	$(_setId[0]).appendlist({theindex:'0'}); //默认添加省
 	$.fn.liClick();
};  
})(jQuery);
作者:广州-wj
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-three-linkage.html

所有话题