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>
相关文章
下面小编就为大家带来一篇js实现会跳动的日历效果(完整实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本文分享了js格式化时间的实例代码，需要的朋友可以看下2016-11-11
这篇文章主要为大家详细介绍了前端如何通过html2canvas和jsPDF实现HTML网页转PDF并导出,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2025-01-01
本文介绍一下js如何高效来拼装字符串的方法，希望大家看了以后多用效率高的代码，不要让客户端浏览器执行的太慢，提高用户体验。2010-04-04
本文通过实例代码给大家介绍了js代码判断的方法，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2007-12-12
本篇适合javascript新手或者学了前端一段时间，对js概念不清晰的同学。本文将讲述几点对于初学者遇到的javascript的坑，相信对javascript基础薄弱的同学，可以加深对javascript的理解2017-01-01
这篇文章主要为大家介绍了微信小程序实现动态渲染Markdown示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了微信小程序使用百度AI识别接口的通用封装Promise,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了js图片轮播特效，图片切换效果特别适合做产品演示，感兴趣的小伙伴可以参考下2015-09-09![js调试系列 源码定位与调试[基础篇]](//img.jbzj.com/images/xgimg/bcimg9.png)
如果看了1, 2两篇，你对控制台应该有一个初步了解了，今天我们来个简单的调试。昨天留的三个课后练习，差不多就是今天要讲的内容2014-06-06
![js调试系列 源码定位与调试[基础篇]](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论