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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
jquery的map与get方法详解
Nov 04 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
three.js实现圆柱体
Dec 30 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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
在python中pandas的series合并方法
2018/11/12 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
为什么会有内存对齐
2016/10/10 面试题
银行门卫岗位职责
2013/12/29 职场文书
中考冲刺决心书
2014/03/11 职场文书
安全教育月活动总结
2014/05/05 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
无房证明样本
2015/06/17 职场文书
酒店厨房管理制度
2015/08/06 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers