JavaScript实现城市级联操作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>城市级联操作</title>
 </head>
 <body>
  省份:
  <select id="province" οnchange="cityCheck()">
   <option>--请选择省份--</option> 
  </select>
  城市:
  <select id="city">
   <option>--请选择城市--</option>
  </select>
    <script>
   var cityList=new Array();

   cityList['江苏省']=['南京市','南通市','无锡市'];
   cityList['安微省']=['合肥市','芜湖市','马鞍山市'];
   cityList['山东省']=['济南市','青岛市','烟台市'];

   function provinceCheck(){
    var province=document.getElementById('province');
   // alert(province);
    province.options.length=0;
    for(var i in cityList){
     province.add(new Option(i,i),null);
    }
   cityCheck();
  }
  window.οnlοad=provinceCheck();
   function cityCheck(){
    var province =document.getElementById('province');
    var city = document.getElementById('city');
    city.options.length=0; 
    for(var i in cityList){
     if(i==province.value){ 
     for(var j in cityList[i]){
      city.add(new Option(cityList[i][j],cityList[i][j]),null);
     }
     }
    }
   }
  
  </script>
 
 </body>
</html>

运行结果:

注意点:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">顶部引入的dtd不可缺,否则运行失败

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值