实现国家省市联动的方法有很多,本文要为大家介绍的 JSON+html 如何实现, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: