javascript实现省市级联效果

来源：互联网发布：程序员应届生个人简历编辑：程序博客网时间：2024/06/09 17:34

<!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">

   var provinces = new Array();//定义一个省份数组
       provinces[0] = ["00","-选择省份-"];
       provinces[1] = ["01","北京市"];//01为北京代号
       provinces[2] = ["02","辽宁省"];//02为辽宁代号
       provinces[3] = ["03","山西省"];


   var citys = new Array();//定义城市数组
       citys[0] = ["0101","北京市"];

       citys[1] = ["0201","沈阳市"];//02**为辽宁的城市代号
       citys[2] = ["0202","大连市"];
       citys[3] = ["0203","铁岭市"];

       citys[4] = ["0301","太原市"];//03**为山西的城市代号
       citys[5] = ["0302","大同市"];
       citys[6] = ["0303","运城市"];

   function fillProvince(){//添加省份方法
       var province = document.getElementById("sheng");
       for(var i=0;i<provinces.length;i++){
           //创建一个Option对象并赋text值和value值
           var option = new Option(provinces[i][1],provinces[i][0]);
           //将该对象加入province(省份)数组中
           //add(new,old)new表示新添加到old之前的对象，如果old为null,则添加到<select>末尾
           province.add(option,null);
       }
       province.options[0].selected = true;//将第一个Option对象设置为选中状态。
   }
   function changeCity(){//选择城市方法
       //获取省份
       var province = document.getElementById("sheng");
       //获取省的代号(provinceCode)
       var provinceCode = province.options[province.selectedIndex].value;
       //获取城市
       var city = document.getElementById("shi");
       //清除当前city中的选项
       city.options.length = 0;
       //添加默认Option对象
       city.add(new Option("-选择城市-","0000"),null);
       //通过代号分别添加对应的城市
       for(var i=0; i<citys.length;i++){
           if(citys[i][0].substring(0,2)==provinceCode){//判断城市的前两位代号与省份代号是否相同
               city.add(new Option(citys[i][1],citys[i][0]),null);//相同则添加该Option对象，即城市
           }
       }
       city.options[1].selected = true;//将对应的第一个城市设置为选中状态
   }
</script>
</head>
<body>

<form>
   <select id="sheng" onchange="changeCity()">
       <script type="text/javascript">fillProvince()</script>
   </select>
   <select id="shi">
       <option value="0000" selected="selected">-选择城市-</option>
   </select>

</form>
</body>
</html>