js 省市区三级联

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<script type="text/javascript">

   function loadCity(index)
   {
    document.getElementById("selCity").options.length = 1;//城市只留一项
        var arr1 = new Array();
        arr1[0] = ["武汉市","黄岗市"];
   arr1[1] = ["湘潭市","长沙市","楼底市"];
   arr1[2] = ["许都市","许昌市","郑州市","开封市"];
   arr1[3] = ["三亚市","海口市"];
   arr1[4] = ["石家庄市","廊坊市"];
   arr1[5] = ["南京市","苏州市","连云港市"];  
  for(var i  in arr1[index])
  {      
  var city = new Option(arr1[index][i],i);
document.getElementById("selCity").options.add(city);
  }
   }
      
   function loadShen()
   {
      var arr0 = new Array("湖北省","湖南省","河南省","海南省","河北省","江苏省");
  for(var i = 0 ; i < arr0.length ; i++)
  {
        var opt = new Option(arr0[i],i);    //实例化一个option对象
    document.getElementById("selShen").options.add(opt);
  }
   }
   //加载地区
   function loadEara(index)
   {
    var shenIndex = document.getElementById("selShen").options.selectedIndex;


    document.getElementById("seleara").options.length = 1;
    var arr2 = new Array();
switch(shenIndex)
{
   case 1:
arr2[0] = ["武昌","洪山"];
arr2[1] = ["黄安","麻"];
break;
case 2:
arr2[0] = ["湘州","湘湘"];
arr2[1] = ["长沙街"];
arr2[2] = ["娄底街","娄底路"];
break;
case 6:
arr2[0] = ["白下区","玄武区","下关区","江宁区","雨花区","六合区","浦口区","高淳县","溧水县","大厂","秦淮区","八卦洲"];
arr2[1] = ["观前街","吴中区","木渎镇","高新区"];
arr2[2] = ["灌南县","灌云县","赣榆县","东海县","新浦区","连云区","涟水县","响水县"];
break;

}
for(var i in arr2[index])
{
var city = new Option(arr2[index][i],i);
document.getElementById("seleara").options.add(city);
}
   }
</script>


</head>


<body onload="loadShen()">
<form name="frm1">
    <table align="center">
 <tr>
     <td colspan="3" align="center"><span style="font-size:24px">省市三级联动</span></td>
 </tr>
      <tr>
    
<td>
<select id = "selShen" onchange="loadCity(this.options[selectedIndex].value)">
  <option>---请选择省份---</option>
</select>
</td>
<td>
   <select id="selCity" onchange="loadEara(this.options[selectedIndex].value)">
                <option>---请选择城市---</option>
</select>
</td>
<td>
   <select id="seleara">
                  <option>---请选择地区---</option>
</select>
</td>
 </tr>
 
</table>
</form>
</body>
</html>
阅读更多
文章标签: javascript CDATA 级联
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭