最近研究某些网站的地点选择,其将所有站点名称存储到一个全局变量里面,通过函数调用该变量进行解析。
基本思路就是,几级联动关系到数组选择维度,如要实现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); } } } } } }