快捷導(dǎo)航

js實現(xiàn)城市級聯(lián)菜單的2種方法

更新時間：2017年06月23日 09:29:01 作者：斯丟皮德曼

這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)城市級聯(lián)菜單的2種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)城市級聯(lián)菜單的具體代碼，供大家參考，具體內(nèi)容如下

方法一：用switch方法判斷。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function changeCity() {

      var x=['牛奶','豆?jié){','油條'];
      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進(jìn)行判斷。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    function chagecity() {
      var citylist = [];
      citylist['四川省'] = ['成都市', '郫都區(qū)'];
      citylist['廣東省'] = ['深圳市', '東莞市'];
      var provinceV = document.getElementById("province").value;
      var city = document.getElementById("city");
      city.length = 1; //清除當(dāng)前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數(shù)組
            var op = new Option(citylist[i][j], citylist[i][j]);//把定義好的數(shù)據(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: