js实现国家、省、市级联效果代码实例

本章节通过实例代码介绍一下如何实现国家、省市级联效果，可能带有国家的在实际应用中比较少，但是可以通过改造实现其他的级联效果，代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</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; 
  
  _city.options.length=1; 
  
  
  for(var e in list){ 
    if(list[e].value==v_country){ 
      for( var p in list[e].province){ 
        if(list[e].province[p].value==v_province){ 
          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国家省市级联。js实现国家、省、市级联效果代码实例

下载全部收藏

125 166

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册