省市级联小例子

最新推荐文章于 2020-06-11 16:18:55 发布

梵音与笙

最新推荐文章于 2020-06-11 16:18:55 发布

阅读量248

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/abcdmengqq/article/details/55051588

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近学了一个关于省市级联简单的小例子，贴出来与大家分享一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
  <select id="selProvince" onchange="changeCity()">
    <option>请选择省份</option>
  </select>
  <select id="selCity">
    <option>请选择城市</option>
  </select>
  <script>
    function $(ID){
    return document.getElementById(ID);
    }
    var cityList=new Array();
    cityList['北京市']=['东城区','西城区','昌平区'];
    cityList['河北省']=['保定','石家庄','定州'];
     cityList['江苏省'] = ['南京市','苏州市','无锡市'];
     cityList['浙江省'] = ['杭州市','宁波市','温州市'];
     cityList['四川省'] = ['四川省','成都市'];
     cityList['海南省'] = ['海口市'];
    function changeCity(){
      var province=$("selProvince").value;
      var city=$("selCity");
       city.options.length=0;
      for (var i in cityList) {
      if(i==province){
        for (var j in cityList[i]) {
          city.add(new Option(cityList[i][j],cityList[i][j]),null);
        }
      }
      }
    }
    function allCity(){
      var province=$("selProvince");
      for (var i in cityList) {
        province.add(new Option(i,i),null);
      }
    }

    window.onload=allCity;
  </script>
</body>
</html>