js实现城市级联菜单的2种方法

2019-11-19 16:16:18

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现城市级联菜单的具体代码，供大家参考，具体内容如下

方法一：用switch方法判断。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script type="text/javascript">    function changeCity() {      var x=['牛奶','豆浆','油条'];      console.log(x.join(','));      var y=[33,22,66,12];      console.log(y.sort());      //如果选择的是河南 在城市中: 洛阳 ，驻马店      //如果选择的是河北 在城市中: 石家庄 ，保定      var province = document.getElementById('selProvince');      var city = document.getElementById('selCity');      //在添加城市前，先清空上一次添加的城市      city.length = 1;      switch (province.value) {        case '河南省':          var op1 = new Option('洛阳', '洛阳');          var op2 = new Option('驻马店', '驻马店');          city.add(op1, null);          city.add(op2, null);          break;        case '河北省':          var op1 = new Option('石家庄', '石家庄');          var op2 = new Option('保定', '保定');          city.add(op1, null);          city.add(op2, null);          break;      }    }  </script></head><body><form action="" name="myform">  <select id="selProvince" onchange="changeCity( )">    <option>--选择省份--</option>    <option value="河南省">河南省</option>    <option value="河北省">河北省</option>  </select>  <select id="selCity">    <option>--选择城市--</option>  </select></form></body></html>

方法二：用if进行判断。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <script>    function chagecity() {      var citylist = [];      citylist['四川省'] = ['成都市', '郫都区'];      citylist['广东省'] = ['深圳市', '东莞市'];      var provinceV = document.getElementById("province").value;      var city = document.getElementById("city");      city.length = 1; //清除当前city中的选项//        for (var i in citylist){//          if (i == provinceV){//            for (var j in citylist[i]){//              citylist.add(new Option(citylist[i][j],citylist[i][j]),null);//            }//          }//        }      for (var i in citylist) {        if (i == provinceV) {//判断i是不是等于province中的值          for (var j in citylist[i]) {//遍历citylist数组            var op = new Option(citylist[i][j], citylist[i][j]);//把定义好的数据添加到city中            city.add(op, null);          }        }      }    }  </script></head><body><form action="">  <select name="" id="province" onchange="chagecity()">    <option value="四川省">四川</option>    <option value="广东省">广东</option>  </select>  <select id="city">    <option value="选择城市">选择城市</option>  </select></form></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：QRCode.js：基于JQuery的生成二维码JS库的使用

下一篇：JS使用正则表达式验证身份证号码