JS+JSON 省市区 三级联动 SELECT

 

<script>

//城市列表

var cityList={

 

"v1001":[["dd1"],["ww1"],["rr1"]],

"v1002":[["daad1"],["waaw1"],["raar1"]],

 

"v2001":[["鼓楼区"],["白下区"],["浦口区"]],

"v2002":[["锡山东区"],["锡山西区"],["锡山北区"]],

"v2003":[["兴化市"],["泰兴区"],["大邹区"]],

 

"v3001":[["杭州东区"],["杭州南区"],["杭州西区"]],

"v3002":[["嘉善区"],["主城区"],["嘉兴大区"]]

}

 

//城市列表

var areaList={ 

"v100":[["北京东城区"],["北京西城区"]], 

"v200":[["南京市" ],["无锡市" ],["泰州市" ]], 

"v300":[["杭州市" ],["嘉兴市" ]] 

};

 

//省列表

var province =[{"100":"北京","200":"江苏省","300":"浙江省"}]

 

 

//初始化省

function province_init(){

var citys = document.getElementById("province");

for (var j in province){

for (var key in province[j])

{

    citys.add( new Option(province[j][key],key));

}

}

}

 

//选择省事件

function province_change(v){

var city = document.getElementById("city");

city.innerHTML = "";

//eval("var citys = areaList.v"+v+";");

var citys = areaList["v"+v];

for (var i=0; i<citys.length; i++)

{

city.add(new Option(citys[i],v*10+i+1)); 

}

city_change(v*10+1);

}

 

//选择市事件

function city_change(vs){

 

var qus = document.getElementById("qus");

qus.innerHTML = "";

    var cList = cityList["v"+vs];

for (var i=0 ;i<cList.length; i++){

qus.add(new Option( cList[i],cList[i]));

}

 

}

 

 

window.onload =function() {province_init();province_change(100);city_change(1001);} 

 

 

 

 

</script>

 

<form name="dataForm"  id="dataForm" action="" method="POST" target="dataFrame"  style="margin: 0"> 

 <select name=province id="province" style="width:100px" onChange="province_change(this.value)"></select> 

 <select name=city id="city"   onChange="city_change(this.value)"></select>

 <select name=qus id="qus"></select> 

 

</form>