单级或多级联动代码

闲来无事写的,如有不足的地方还望多多包涵并提出建议

效果图:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,body{font-family: "微软雅黑";font-size: 14px;}
			body,h1,h2,h3,h4,h5,div,span,p,ul,ol,dl,dt,dd,a,input,img,select{margin: 0;padding: 0;list-style: none;border: 0;font-weight: normal;outline: none;}
			select{height: 2.4rem;line-height: 2.4rem;width: 10rem;margin-bottom: 0.5rem;border: 1PX solid black;cursor: pointer;}
			.abc{display: block;color: black;font-size: 18px;}
			.cc{background: black;color: white;}
		</style>
	</head>
	<body>
		<div id="abc">
		</div>
		<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
		<script type="text/javascript">
			;+function($,window,document,undefine){
				var Myfunction = function(ele,doms,obj){
					var dLen = doms.length,$dom=ele,$dLs='',$ele0='',$e0='',dVals=doms,self=this,
					array0=[],getArray0=[],rsArray0=[],sVal0='',array1=[],getArray1=[],rsArray1=[],sVal1='';
					rsArray0 =this.removeRepeat(this.setArrays(obj,doms[0]["_id"],array0),getArray0);
					$.each(dVals, function(i,item) {
						$dLs +='<select name="" class="'+(dVals[i]._class?dVals[i]._class:'')+'" id="'+dVals[i]["_id"]+'" ><option value="0">请选择'+dVals[i].name+'</option>',
						(i===0)?$.each(rsArray0, function(j,v) {$dLs +='<option value="'+v+'">'+v+'</option>'}):'',
						$dLs +='</select>';
					});
					$dom.append($dLs);
					ele.on('change','select',function(){
						var s_len=$(this).nextAll('select').length;
						if(s_len>0){
							var s_id=$(this).next('select')[0].id;
							for(let i =0;i<s_len;i++){
								for(let j=0;j<dLen;j++){
									if($(this).nextAll('select')[i].id==dVals[j]["_id"]){
										$(this).nextAll('select').eq(i).html('<option value="0">请选择'+dVals[j].name+'</option>')
									}
								}
							}
							rsArray1=self.removeRepeat(self.setArrays(obj,s_id,array1,$(this).val(),$(this)[0].id),getArray1)
							$.each(rsArray1, function(j,v) {
								$('#'+s_id).append('<option value="'+v+'">'+v+'</option>')
							})
						}
					})
				};
				Myfunction.prototype={
					setArrays:function(o,w,a,v,d){
						a=[];
						if(v==''){
							$.each(o, function(i,item) {
								a.push(o[i][w])
							});
						}else{
							$.each(o, function(i,item) {
								if(o[i][d]==v){
									a.push(o[i][w])						
								}
							});
						}
						return a;
					},
					removeRepeat:function(o,a){
						a=[];
						for(var aI = 0,aLen=o.length;aI<aLen;aI++){
							if(a.indexOf(o[aI]) == -1){
								a.push(o[aI])
							}
						}
						return a;
					},
				};
				$.fn.proCityDealer3=function(doms,obj){
					var myfunction= new Myfunction(this,doms,obj);
				}
			}(jQuery,window,document)
		</script>
		<script type="text/javascript">
			$(function(){
				/*使用说明
				 * 1、调用proCityDealer3方法,接收2个对象;
				 * 2、第一个对象为select的值,支持的key:name,_id,_class;
				 * 3、第二个对象为select里面option的值;
				 * 特别注意:_id的的取值要与第二个对象里面的key一一对应,_class允许为空,name不为空*/
				var dom=[{name:'省份',_id:"pro",_class:"abc cc"},{name:'城市',_id:"city"},{name:'经销商',_id:"dealer",_class:"abc"},{name:'电话',_id:"phone",_class:"abc"}], 
					msg=[
						{"pro":"广西省","city":"百色市","dealers":"百色万马汽车销售服务有限公司","dealer":"百色万马","phone":"0776-2222237","address":"广西百色市右江区大旺路中段12号大旺汽车广场长安马自达百色万马4S店"},
						{"pro":"湖南省","city":"常德市","dealers":"常德万通汽车销售服务有限公司","dealer":"常德万通","phone":"0736-7760811","address":"常德市武陵区常德大道和柳叶大道交汇处"},
						{"pro":"广东省","city":"潮州市","dealers":"潮州市德隆汽车贸易有限公司","dealer":"潮州德隆","phone":"0768-5226333","address":"潮州市潮安县浮洋镇乌洋村干渠东侧"},
						{"pro":"湖南省","city":"郴州市","dealers":"郴州万马汽车销售服务有限公司","dealer":"郴州万马","phone":"0735-2235711","address":"湖南省郴州市北湖区郴州大道城前岭立交桥西长安马自达4S店"},
						{"pro":"广东省","city":"东莞市","dealers":"东莞市莞泰通益汽车销售服务有限公司","dealer":"东莞莞泰","phone":"0769-81718868","address":"东莞市厚街镇莞太路溪头天桥旁马自达4S店"},
						{"pro":"广东省","city":"东莞市","dealers":"东莞市通益汽车销售服务有限公司","dealer":"东莞通益","phone":"0769-81191313","address":"东莞市寮步镇药勒村蟠龙路"},
						{"pro":"广东省","city":"佛山市","dealers":"佛山海迪汽车有限公司","dealer":"佛山海迪","phone":"0757-82782363","address":"佛山市禅城区佛山大道381号佛山(国际)车城南区四座一号"},
						{"pro":"广东省","city":"佛山市","dealers":"佛山骏迪汽车有限公司","dealer":"佛山骏迪","phone":"0757-81853377","address":"佛山市南海区桂城海八路华南汽车城G13号"},
						{"pro":"广东省","city":"佛山市","dealers":"佛山市耀田汽车有限公司","dealer":"佛山耀田","phone":"0757-22816066/0757-22816065","address":"佛山市顺德区伦教镇105国道边【即伦教周大福旁】"},
						{"pro":"广东省","city":"佛山市","dealers":"佛山智迪汽车有限公司","dealer":"佛山智迪","phone":"0757-817778182","address":"佛山市三水区南丰大道26号长建车城内(荷花世界入口处往芦苞方向1.5公里右侧)"},
						{"pro":"福建省","city":"福州市","dealers":"福建源和汽车销售服务有限公司","dealer":"福建源和","phone":"0591-28352688","address":"福建省福州市仓山区盖山投资区高南路2号源和马自达二楼市场部"},
						{"pro":"福建省","city":"福州市","dealers":"福州龙益汽车销售服务有限公司","dealer":"福州龙益","phone":"0591-88909988","address":"福建省福州市晋安区新店镇李园路89号"},
						{"pro":"江西省","city":"赣州市","dealers":"赣州腾马汽车服务有限公司","dealer":"赣州腾马","phone":"0797-8198599","address":"赣州开发区蟠龙镇田心村金岭路144号"},
						{"pro":"广西省","city":"南宁市","dealers":"广西弘骏汽车销售服务有限公司","dealer":"广西弘骏","phone":"0771-3225588","address":"南宁市秀厢大道199号金源汽车城"},
						{"pro":"广西省","city":"南宁市","dealers":"广西鑫广达长久汽车销售服务有限公司","dealer":"广西鑫广达","phone":"0771-4866551","address":"广西壮族自治区南宁市白沙大道54号"},
						{"pro":"广东省","city":"广州市","dealers":"广州市东富汽车销售服务有限公司","dealer":"广州东富","phone":"020-61196368","address":"广州市荔湾区龙溪大道488号长安马自达"},
						{"pro":"广东省","city":"广州市","dealers":"广州市福犸汽车有限公司","dealer":"广州福犸","phone":"020-81008999 ","address":"广州市白云区江夏空港大道尚德广场长安马自达 "},
						{"pro":"广东省","city":"广州市","dealers":"广州市华刊汽车销售有限公司","dealer":"广州华刊","phone":"020-66231646","address":"广州市番禺区番禺大道北668号南村镇里仁洞村102场地"},
						{"pro":"广东省","city":"广州市","dealers":"广州市华灵汽车销售有限公司","dealer":"广州华灵","phone":"020-22223639","address":"广州黄埔大道西668号 广州赛马场汽车城南区A栋1号"},
						{"pro":"广西省","city":"桂林市","dealers":"桂林鑫广达博骏汽车销售服务有限公司","dealer":"桂林鑫广达","phone":"0773-5580992","address":"桂林市临桂机场路北侧(真龙国际物流园)"},
						{"pro":"海南省","city":"海口市","dealers":"海口优之杰汽车服务有限公司","dealer":"海口优之杰","phone":"0898-68640033","address":"海南省海口市南海大道223号"},
						{"pro":"广东省","city":"河源市","dealers":"河源市宝恒汽车销售有限公司","dealer":"河源宝恒","phone":"0762-7581299","address":"广东省河源市东江新区超然汽车城内马自达4S店"},
						{"pro":"湖南省","city":"衡阳市","dealers":"衡阳津湘万华汽车销售服务有限公司","dealer":"衡阳津湘万华","phone":"0734-3377111","address":"湖南省衡阳市蒸湘区西外环路杨柳汽贸城长安马自达"},
						{"pro":"湖南省","city":"长沙市","dealers":"湖南万达汽车销售服务有限公司","dealer":"湖南万达","phone":"0731-82977988","address":"长沙市星沙中南汽车世界A区06号"},
						{"pro":"湖南省","city":"长沙市","dealers":"湖南万华汽车销售服务有限公司","dealer":"湖南万华","phone":"0731-88222822","address":"长沙市天心区桂花坪街道雀园路长安马自达湖南万华4S店"},
						{"pro":"湖南省","city":"怀化市","dealers":"怀化市恒旺汽车销售服务有限公司","dealer":"怀化恒旺","phone":"0745-2789666","address":"怀化市鹤城区南环路国际汽车城长安马自达4S店"},
						{"pro":"广东省","city":"惠州市","dealers":"惠州市通力达汽车销售服务有限公司","dealer":"惠州通力达","phone":"0752-5831111","address":"惠州市惠博沿江路金山汽车城12号展场"},
						{"pro":"广东省","city":"惠州市","dealers":"惠州市通利华汽车贸易有限公司","dealer":"惠州通利华","phone":"0752-2818898","address":"惠州市惠城区三栋数码工业园惠南汽车城二期D2栋"},
						{"pro":"广东省","city":"江门市","dealers":"江门市振宇汽车销售服务有限公司","dealer":"江门振宇","phone":"0750-3088599","address":"广东省江门市蓬江区建设三路113号"},
						{"pro":"江西省","city":"南昌市","dealers":"江西江铃海外马自达汽车销售服务有限公司","dealer":"江西江铃海外","phone":"0791-85216600","address":"江西省南昌市青云谱区迎宾大道755号"},
						{"pro":"江西省","city":"南昌市","dealers":"江西江铃海外福马汽车销售服务有限公司","dealer":"江西江铃海外福马","phone":"0791-85201133","address":"江西省南昌市青云谱区迎宾大道755号"},
						{"pro":"江西省","city":"吉安市","dealers":"江西金乐玛汽车销售服务有限公司","dealer":"江西金乐玛","phone":"0796-8911188","address":"江西省吉安市吉州区城南华通物流园3栋1层(华美立家售楼部对面)"},
						{"pro":"广东省","city":"揭阳市","dealers":"揭阳恒诚汽车贸易有限公司","dealer":"揭阳恒诚","phone":"0663-8297777 0663-8260008","address":"揭阳市东山区环市北路与晓翠路交汇处(即黄岐山正对面)"},
						{"pro":"广东省","city":"深圳市","dealers":"劲达汽车销售服务(深圳)有限公司","dealer":"劲达(深圳)","phone":"0755-86227337","address":"深圳市南山区关口二路前海嘉进隆汽车城E02B"},
						{"pro":"广西省","city":"柳州市","dealers":"柳州鑫广达博骏汽车销售服务有限公司","dealer":"柳州鑫广达","phone":"0772-8803390","address":"广西柳州市广汽路2号汽车贸易园长安马自达4s店"},
						{"pro":"福建省","city":"龙岩市","dealers":"龙岩富骏汽车有限公司","dealer":"龙岩富骏","phone":"0597-2368555","address":"龙岩市新罗区东城东兴路210-1号"},
						{"pro":"广东省","city":"茂名市","dealers":"茂名市京粤名达汽车有限公司","dealer":"茂名京粤名达","phone":"0668-2928828","address":"广东省茂名市高水公路南香路段厚禄陂村京粤汽车城"},
						{"pro":"广东省","city":"梅州市","dealers":"梅州市通利华汽车服务有限公司","dealer":"梅州通利华","phone":"0753-2319808","address":"梅州市环市西路(平远路口往锭子桥方向500米)"},
						{"pro":"广东省","city":"清远市","dealers":"清远市骏昇汽车销售服务有限公司","dealer":"清远骏昇","phone":"0763-3388856","address":"清远市新城B28号区骏飞汽车城"},
						{"pro":"福建省","city":"泉州市","dealers":"泉州盛成汽车销售服务有限公司","dealer":"泉州盛成","phone":"0595-22669969","address":"福建省泉州市鲤城区南环路站前大道路口(宏源商务酒店旁)"},
						{"pro":"福建省","city":"泉州市","dealers":"泉州益成汽车贸易发展有限公司","dealer":"泉州益成","phone":"0595-22689777","address":"福建省泉州市丰泽区华大南埔"},
						{"pro":"海南省","city":"三亚市","dealers":"三亚优之杰汽车销售服务有限公司","dealer":"三亚优之杰","phone":"0898-88719846","address":"海南省三亚市吉阳区迎宾大道449号"},
						{"pro":"福建省","city":"厦门市","dealers":"厦门市盛成汽车服务有限公司","dealer":"厦门盛成","phone":"0592-6206666","address":"厦门市海沧区马青路1285号"},
						{"pro":"广东省","city":"汕头市","dealers":"汕头市通利华汽车服务有限公司","dealer":"汕头通利华","phone":"0754-82552888/0754-82552999","address":"汕头市高新区科技西路3号"},
						{"pro":"江西省","city":"上饶市","dealers":"上饶市福铃达汽车有限公司","dealer":"上饶福铃达","phone":"0793-6178689","address":"江西省上饶市经济开发区三清山西大道1号1栋(国际家俱城旁)"},
						{"pro":"广东省","city":"韶关市","dealers":"韶关市荣和通达汽车贸易有限公司","dealer":"韶关荣和","phone":"0751-8605666","address":"广东省韶关市浈江区韶南大道八公里"},
						{"pro":"湖南省","city":"邵阳市","dealers":"邵阳津湘万华汽车销售服务有限公司","dealer":"邵阳津湘万华","phone":"0739-5195668","address":"邵阳市邵阳大道与大兴路交叉口往北200米长安马自达4S店"},
						{"pro":"广东省","city":"深圳市","dealers":"深圳通利华宝安汽车销售服务有限公司","dealer":"深圳通利华宝安","phone":"0755-29695828","address":"深圳宝安沙井新和大道与宝安大道交汇处通利华马自达市场部"},
						{"pro":"广东省","city":"深圳市","dealers":"深圳通利华福滨汽车服务有限公司","dealer":"深圳通利华福滨","phone":"0755-26609998","address":"深圳市龙岗区坂田街道布龙路339号鸿生源大厦A栋首层"},
						{"pro":"广东省","city":"深圳市","dealers":"深圳通利华龙城汽车销售服务有限公司","dealer":"深圳通利华龙城","phone":"0755-28678818","address":"深圳市龙岗区横岗街道荷坳社区长江埔路49号京铁科技工业园A栋 "},
						{"pro":"广东省","city":"阳江市","dealers":"阳江市通利华汽车服务有限公司","dealer":"阳江通利华","phone":"0662-2881999","address":"阳江市江城区南排预留地康泰路7号"},
						{"pro":"江西省","city":"宜春市","dealers":"宜春津湘万华汽车销售服务有限公司","dealer":"宜春津湘万华","phone":"0795-3289899","address":"宜春市袁州区经济技术开发区经发大道36号【香槟国际正对面】"},
						{"pro":"湖南省","city":"益阳市","dealers":"益阳福顺福达汽车销售服务有限公司","dealer":"益阳福顺","phone":"0737-3555888","address":"益阳市赫山区汽车东站东方维也纳上S308省道往湘阴方向1000米"},
						{"pro":"湖南省","city":"永州市","dealers":"永州津湘万达汽车销售服务有限公司","dealer":"永州津湘万达","phone":"0746-6677555","address":"湖南省永州市零陵区潇湘汽车城往永连公路方向500米"},
						{"pro":"广东省","city":"湛江市","dealers":"湛江合田汽车销售服务有限公司","dealer":"湛江合田","phone":"0759-3208877","address":"广东省湛江市赤坎区椹川大道北50号(瀚龙汽车生活广场内)"},
						{"pro":"福建省","city":"漳州市","dealers":"漳州富骏汽车有限公司","dealer":"漳州富骏","phone":"0596-2028899","address":"福建省漳州市龙文区迎宾大道吉马汽车城B6区  漳州富骏汽车有限公司长安马自达4s店"},
						{"pro":"广东省","city":"肇庆市","dealers":"肇庆美轮庆达汽车有限公司","dealer":"肇庆美轮庆达","phone":"0758-2777666","address":"肇庆市迎宾大道北侧美轮车城长安马自达4S店"},
						{"pro":"广东省","city":"中山市","dealers":"中山市万事得汽车销售服务有限公司","dealer":"中山万事得","phone":"0760-88588888","address":"中山市东区中山六路检验检疫局对面"},
						{"pro":"广东省","city":"中山市","dealers":"中山中洋汽车销售服务有限公司","dealer":"中山中洋","phone":"0760-89828828","address":"中山市小榄镇菊城大道176号金宁汽车城内A1栋"},
						{"pro":"广东省","city":"珠海市","dealers":"珠海市新通达汽车销售服务有限公司","dealer":"珠海新通达","phone":"0756-8588188","address":"珠海市香洲区前山工业区华威路126号"},
						{"pro":"广东省","city":"广州市","dealers":"广州市悦马汽车有限公司","dealer":"广州悦马","phone":"020-36808686","address":"广州市花都区镜湖大道自编21号A栋长安马自达4S店"},
						{"pro":"广东省","city":"M18127","dealers":"云浮美轮庆达汽车有限公司","dealer":"云浮美轮庆达","phone":"0766-8328622","address":"云浮市云城区环市东路28号美轮车城内长安马自达4S店"},
						{"pro":"广西省","city":"北海","dealers":"北海瑞祥汽车销售服务有限公司","dealer":"北海瑞祥盛","phone":"0779-3226313","address":"北海市海城区南珠大道中段青少年宫对面"},
						{"pro":"福建省","city":"莆田","dealers":"莆田龙益汽车销售服务有限公司","dealer":"莆田龙益","phone":"0594-6066899","address":"福建省莆田市荔城区西天尾镇汀渚村城涵西大道3355号"},
						{"pro":"广东省","city":"江门","dealers":"江门市领泰销售服务有限公司","dealer":"江门领泰","phone":"0750-6166111","address":"江门市新会区新会大道东4号"},
						];
				$('#abc').proCityDealer3(dom,msg)
			})
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/Angular_/article/details/82352212