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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
PHP中static关键字原理的学习研究分析
2011/07/18 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php文件包含的几种方式总结
2019/09/19 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
促销活动总结范文
2014/04/30 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年应急工作总结
2014/12/11 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript