城市联动

游鹄君2025年4月30日小于 1 分钟
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>城市联动</title>
</head>
<body>
  <select name="" id="city"></select>
 
 
  <select name="" id="area"></select>
 
  <script type="text/javascript">
    var city = document.getElementById('city');
 
    var area = document.getElementById('area');
 
    //数组
    var c = ['北京市','河南省','河北省','山西省','山东省'];
    for (var i = 0; i < c.length; i++) {
     //第一种方法
     //city.innerHTML+='<option value="'+i+'">'+c[i]+'</option>';
     //第二种方法
     var op=new Option(c[i],i);
     city.options.add(op);
 
    };
 
    //市 
    var a = [
     ['昌平区','朝阳区','通州区','平谷区'],
     ['安阳市','濮阳市','郑州市','开封市','南阳市'],
     ['石家庄市','保定市','邯郸市','承德市','唐山市'],
     ['太原市','大同市','运城市','晋城市'],
     ['济南市','青岛市','烟台市','威海市']
    ];
 
    city.onchange=function()
    {
     //获取省市的值
     var cv=this.value;
 
     //注意!!!每次改变的时候因为循环是+=,结果会累加.所以没次改变都应改变清空
     area.innerHTML='';
     for (var i = 0; i < a[cv].length; i++) {
       //第一种方法
       //area.innerHTML+='<option value="'+i+'">'+a[cv][i]+'</option>';
 
       //第二种方法
       var ops=new Option(a[cv][i],i);
 
       area.options.add(ops);
     };
    }
  </script>
</body>
</html>