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

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

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

<select onchange="showcity(this.value)" id="pro">
<option value="浙江省">浙江省</option>
<option value="广东省">广东省</option>
</select>
<select id="city" onchange="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);
}
}
}
}
}
}