javascript

JSON+HTML to achieve the national provinces and cities linkage selection effect


<!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":" China ",
"value":"86",
"province":[{"name":" hubei ",
"value":"430000",
"city":[{"name":" wuhan ","value":"wh"},
{"name":" huanggang ","value":"hg"},
{"name":" xiangyang ","value":"xy"}]},
{"name":" hebei ",
"value":"100000",
"city":[{"name":" handan ","value":"hd"},
{"name":" baoding ","value":"bd"},
{"name":" shijiazhuang ","value":"sjz"}]},

{"name":" hunan ",
"value":"440000",
"city":[{"name":" changsha ","value":"cs"},
{"name":" zhuzhou ","value":"zz"},
{"name":" hengyang ","value":"hy"}]}]},
{"name":" The United States ",
"value":"22",
"province":[{"name":" The Arkansas ",
"value":"990000",
"city":[{"name":" New York, ","value":"ny"},
{"name":" Washington, dc, ","value":"hsd"},
{"name":" Boston ","value":"bsd"}]},

{"name":" Ah ha ha ",
"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">-- Please select country ---</option>
</select>
<select id="province" onchange="toCity();">
<option value="-1">-- Please select province ---</option>
</select>
<select id="city">
<option value="-1">-- Please select urban area ---</option>
</select>

</body>
</html>