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


Posted in Javascript onMay 18, 2014
<!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>
Javascript 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
聊聊JS ES6中的解构
Apr 29 Javascript
让alert不出现弹窗的两种方法
May 18 #Javascript
jqGrid读取选择的多行的某个属性代码
May 18 #Javascript
wap浏览自动跳转到wap页面的js代码
May 17 #Javascript
javascript教程:关于if简写语句优化的方法
May 17 #Javascript
javascript if条件判断方法小结
May 17 #Javascript
js加减乘除丢失精度问题解决方法
May 16 #Javascript
js脚本获取webform服务器控件的方法
May 16 #Javascript
You might like
php5 mysql分页实例代码
2008/04/10 PHP
PHP中如何定义和使用常量
2013/02/28 PHP
php常用hash加密函数
2014/11/22 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
Prototype Class对象学习
2009/07/19 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
javascript常用的方法分享
2015/07/01 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python实现购物程序思路及代码
2017/07/24 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
行政前台岗位职责
2013/12/04 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
老干部座谈会主持词
2015/07/03 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书