使用原生Javascript实现城市选择逐级联动

最近研究某些网站的地点选择，其将所有站点名称存储到一个全局变量里面，通过函数调用该变量进行解析。

基本思路就是，几级联动关系到数组选择维度，如要实现2级联动，需要一个二维数组存储数据。

	<select οnchange="showcity(this.value)" id="pro">
		<option value="浙江省">浙江省</option>
		<option value="广东省">广东省</option>
	</select>
	<select id="city" οnchange="var pro=document.getElementById('pro');showxian(pro.value,this.value)">
		<option value="0">请选择城市</option>
	</select>
	<select name="xian" id="xian">
		<option value="0">请选择县区</option>
	</select>











js代码部分
var cityList = {
	浙江省:[
		['杭州市',[
			'滨江区'
		]],
		['宁波市',[
			'海曙区'
		]]
	],
	广东省:[
		['广州市',[
			'白云区',
			'高新区'
		]],
		['深圳市',[
			'某某区',
			'某某区'
		]]
	]
};
function showcity(p)
{
	var pro,city,x;
	if(typeof(cityList[p])!='undefined')
	{
		pro = cityList[p];			
		var sec = document.getElementById('city');
			sec.options.length=0;
		for(var i=0;i<pro.length;i++)
		{			

			var opt = document.createElement('option');
			opt.value=pro[i][0];//城市值
			opt.innerHTML = pro[i][0];
			sec.appendChild(opt);
		}
	}
}

function showxian(pro,x)
{
	var p = cityList[pro];
	var city;
	var xian;
	if(typeof(p)!='undefined')
	{
		if(p.length!=0)
		{
			for(var i=0;i<p.length;i++)
			{
				if(p[i][0]==x)
				{
					var xian=document.getElementById('xian');
					xian.options.length=0;
					for(var j=0;j<p[i][1].length;j++)
					{
						var opt = document.createElement('option');
						opt.value=p[i][1][j];
						opt.innerHTML = opt.value;
						xian.appendChild(opt);
					}
				}
			}
		}
	}
}