漂亮的省级下拉选择 

<style type="text/css">
body{
    margin:10;
    padding:0;
    font-size:12px;
}

</style>
<script src="js/select.js">
 
</script>
</head>

<body>

<form action="" method="post" name="myform">
  <select  id="selProvince" onchange="changeCity('selProvince','selCity')">
    <script  type="text/javascript">
         /*调用函数自动添加省份选项，产生如下HTML代码的效果*/
          fillProvince("selProvince");
    </script>
    <!-- 
      <option value="00">－选择省份－</option>      
      <option value="01">北京市</option>
       <option value="02">湖北省</option>
       <option value="03">四川省</option>
       ......
     -->
  </select>
   <select  id="selCity">
        <option value="0000" selected="selected">--选择城市--</option>
    </select>
  </form>

</body>
// JavaScript Document

 /*使用二维数组存放省份（一维数组套一维数组来模拟），前2位表示省份编号，城市依靠此编号建立关联，类似数据库的主外键*/
  var provinces=new Array(
                     new Array("00","--选择省份--"),
                     new Array("01","北京市"),
                     new Array("02","湖北省"),
                     new Array("03","四川省"),
                     new Array("04","江苏省"),
                     new Array("05","湖南省")
                     //按此添加其他省份，超过9用两位表示，如："10","11"
                    );
  
  /*使用二维数组存放城市，和省份的关联依靠前2位的省份编号*/
  var citys=new Array(
                     new Array("0101","北京"), //直辖市特殊，下属只有对应的直辖市
                     new Array("0201","武汉"),  
                     new Array("0202","荆州"), //同理添加湖北省的其他城市，其他省份同理                     new Array("0301","成都"),
                     new Array("0302","绵阳"),
                     new Array("0401","南京"),
                     new Array("0401","苏州"),
                     new Array("0501","长沙"),
                     new Array("0502","株洲")
                     //按此添加其他省份下属城市
                    );

  function fillProvince(provinceID){
      var selProvince=document.getElementById(provinceID);
      /*添加省份，下面使用的是针对下拉框对象的new和add方法和，对于普通元素则需要使用createElement和appendChild方法*/
      for(var i=0;i<provinces.length;i++){
        var option=new Option(provinces[i][1],provinces[i][0]);
          selProvince.add(option,null);   
      }
      
      selProvince.options[0].selected=true;  //设置默认选项:－选择省份－  
}
  
  
 function changeCity(provinceID,cityID){
      var selCity=document.getElementById(cityID);
      selCity.options.length=0;//清空原来的所有选项
      selCity.add(new Option('-选择城市-','0000'),null);
      var selProvince=document.getElementById(provinceID);
      var provinceCode=selProvince.options[selProvince.selectedIndex].value;
      
      /*添加城市，条件是和对应省份关联的城市，同理，下列代码可以使用createElement和appendChild方法代替*/
      for(var i=0;i<citys.length;i++){
        if(citys[i][0].substring(0,2)==provinceCode){
            var optionAdded=new Option(citys[i][1],citys[i][0]);
              selCity.add(optionAdded,null);   
        }
      }
      selCity.options[0].selected=true;  //设置默认选项:－选择城市－  
}

 

posted @ 2013-11-16 13:30  914556495  阅读(229)  评论(0)    收藏  举报