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>