JSON+HTML实现国家省市联动选择效果

更新时间：2014年05月18日 09:55:45 作者：

实现国家省市联动的方法有很多，本文要为大家介绍的JSON+HTML如何实现,需要的朋友可以参考下

 
<!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":"中国", 
"value":"86", 
"province":[{"name":"湖北", 
"value":"430000", 
"city":[{"name":"武汉","value":"wh"}, 
{"name":"黄冈","value":"hg"}, 
{"name":"襄阳","value":"xy"}]}, 
{"name":"河北", 
"value":"100000", 
"city":[{"name":"邯郸","value":"hd"}, 
{"name":"保定","value":"bd"}, 
{"name":"石家庄","value":"sjz"}]}, 

{"name":"湖南", 
"value":"440000", 
"city":[{"name":"长沙","value":"cs"}, 
{"name":"株洲","value":"zz"}, 
{"name":"衡阳","value":"hy"}]}]}, 
{"name":"美国", 
"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">--请选择国家---</option> 
</select> 
<select id="province" onchange="toCity();"> 
<option value="-1">--请选择省份---</option> 
</select> 
<select id="city"> 
<option value="-1">--请选择市区---</option> 
</select> 

</body> 
</html> 

您可能感兴趣的文章:

event.currentTarget与event.target的区别介绍
event.currentTarget与event.target的区别想大家在使用的时候不是很在意，本文以测试代码来讲解它门之间的不同
2012-12-12
详解js中call与apply关键字的作用
本文主要介绍js中call与apply关键字的作用以及它们的用法,具体实例如下,希望对大家有所帮助
2016-11-11
JS实现秒杀倒计时特效
这篇文章主要为大家详细介绍了JS实现秒杀倒计时特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
javascript 二进制运算技巧解析
javascript 中的二进制运算的一些技巧，晒出来和你们分享一下，希望可以帮助你们
2012-11-11
JS温故而知新之变量提升和时间死区
这篇文章主要给大家介绍了关于JS温故而知新之变量提升和时间死区的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
JS实现新浪微博效果带遮罩层的弹出框代码
这篇文章主要介绍了JS实现新浪微博效果带遮罩层的弹出框代码,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
Js nodeType 属性全面解析
本文是对Js nodeType的属性进行了全面分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
详解js中的apply与call的用法
在ECAMScript3给Function的原型定义了两个方法，它们是Function.prototype.call和Function.prototype.apply。本文详细介绍了apply与call的用法，有需要的可以参考下。
2016-07-07
JS监听变量改变的实现
本文主要介绍了JS监听变量改变的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
使用JSON格式提交数据到服务端的实例代码
这篇文章主要介绍了使用JSON格式提交数据到服务端的实例代码，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
2018-04-04