您的位置:首页 > Web前端 > JavaScript

JS+JSON 省市区 三级联动 SELECT

2014-01-24 19:58 716 查看
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: