JavaScript简单省市区的三级联动

三级联动

<div>
			省：<select style="width: 100px;"  id="sheng" onchange="Select1()"><option value="-1">-请选择-</option></select>
			市：<select style="width: 100px;" id="shi" onchange="Select2()"></select>
			区：<select style="width: 100px;" id="xain"></select>
		</div>
	<script>
		var sheng1=["北京市","上海市","天津市"];
		var shi1=[
			["朝阳区 ","东城区" ,"西城区"],
		    ["黄埔区","杨浦区","浦东新区"],
			["和平区","河东区","河西区"]
		       ];
		var xain1=[
			[
				["朝阳1","朝阳2","朝阳3"],
				["东城1","东城2","东城3"],
				["西城1","西城2","西城3"]
			],
			[
				["黄埔1","黄埔2","黄埔3"],
				["杨浦1","杨浦2","杨浦3"],
				["浦东新1","浦东新2","浦东新3"]
			],
			[
				["和平1","和平2","和平3"],
			    ["河东1","河东2","河东3"],
			    ["河西1","河西2","河西3"]
			]
		];
		var Sheng=document.getElementById("sheng");
		var Shi=document.getElementById("shi");
		var Xian=document.getElementById("xain"); 
			for(let i=0;i<sheng1.length;i++)
		    {
			var op=new Option(sheng1[i],i);
			Sheng.options.add(op);
			}
			function Select1(){
				DeleteShi();
				DeleteXian();
				 a=Sheng.selectedIndex;
				 AddShi(a);
				 AddXina(a,0);
			   }//选择省
			function  Select2(){
				DeleteXian();
				b=Shi.selectedIndex;
				AddXina(a,b);
			}//选择市
			function AddShi(a){
				for(let i=0;i<shi1.length;i++)
				{
				var op=new Option(shi1[a-1][i],i);
				Shi.options.add(op);
				}
			}//增加市
			function AddXina(a,b){
				for(let i=0;i<xain1.length;i++)
				{
				var op=new Option(xain1[a-1][b][i],i);
				Xian.options.add(op);
				}
			}//增加区
	        function DeleteShi(){
				Shi.options.length=0;
			}//清空市
			function DeleteXian(){
				Xian.options.length=0;
			}//清空区
	</script>