快捷導(dǎo)航

JSON+HTML實(shí)現(xiàn)國(guó)家省市聯(lián)動(dòng)選擇效果

更新時(shí)間：2014年05月18日 09:55:45 作者：

實(shí)現(xiàn)國(guó)家省市聯(lián)動(dòng)的方法有很多，本文要為大家介紹的JSON+HTML如何實(shí)現(xiàn),需要的朋友可以參考下

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>json</title> 
<script type="text/javascript"> 
<!-- 
var list=[{"name":"中國(guó)", 
"value":"86", 
"province":[{"name":"湖北", 
"value":"430000", 
"city":[{"name":"武漢","value":"wh"}, 
{"name":"黃岡","value":"hg"}, 
{"name":"襄陽(yáng)","value":"xy"}]}, 
{"name":"河北", 
"value":"100000", 
"city":[{"name":"邯鄲","value":"hd"}, 
{"name":"保定","value":"bd"}, 
{"name":"石家莊","value":"sjz"}]}, 

{"name":"湖南", 
"value":"440000", 
"city":[{"name":"長(zhǎng)沙","value":"cs"}, 
{"name":"株洲","value":"zz"}, 
{"name":"衡陽(yáng)","value":"hy"}]}]}, 
{"name":"美國(guó)", 
"value":"22", 
"province":[{"name":"阿肯色", 
"value":"990000", 
"city":[{"name":"紐約","value":"ny"}, 
{"name":"華盛頓","value":"hsd"}, 
{"name":"波士頓","value":"bsd"}]}, 

{"name":"阿哈哈", 
"value":"980000", 
"city":[{"name":"AA","value":"ahd"}, 
{"name":"BB","value":"abd"}, 
{"name":"CC","value":"asjz"}]}] 

}]; 

function init(){ 
var _country=document.getElementById("country"); 
for(var e in list){ 
var opt_1=new Option(list[e].name,list[e].value); 
_country.add(opt_1); 
} 
} 



function toProvince(){ 
var _country=document.getElementById("country"); 
var _province=document.getElementById("province"); 
var _city=document.getElementById("city"); 
var v_country=_country.value; 

_province.options.length=1; 
_city.options.length=1; 

for(var e in list){ 
if(list[e].value==v_country){ 
for( var p in list[e].province){ 
var opt_2=new Option(list[e].province[p].name,list[e].province[p].value); 
_province.add(opt_2); 

} 
break; 
} 
} 
} 


function toCity(){ 
var _country=document.getElementById("country"); 
var _province=document.getElementById("province"); 
var _city=document.getElementById("city"); 

var v_country=_country.value; 
var v_province=_province.value; 

//_province.options.length=1; 
_city.options.length=1; 


for(var e in list){ 
if(list[e].value==v_country){ 
for( var p in list[e].province){ 
//alert(list[e].province[p].value); 
if(list[e].province[p].value==v_province){ 
// alert(list[e].province[p].value); 
for(var cc in list[e].province[p].city){ 
var opt_3=new Option(list[e].province[p].city[cc].name,list[e].province[p].city[cc].value); 
_city.add(opt_3); 
} 

return; 
} 


} 
break; 
} 
} 
} 

//--> 
</script> 
</head> 

<body onload="init();";> 
<select id="country" onchange="toProvince();"> 
<option value="-1">--請(qǐng)選擇國(guó)家---</option> 
</select> 
<select id="province" onchange="toCity();"> 
<option value="-1">--請(qǐng)選擇省份---</option> 
</select> 
<select id="city"> 
<option value="-1">--請(qǐng)選擇市區(qū)---</option> 
</select> 

</body> 
</html> 