三级联动案例

其他 2020-09-14 10:09:20 阅读次数: 0

三级联动案例

  • 首先写一个JSON数据

    [
  {
      
      
    "province": "吉林省",
    "cities": [
      {
      
      
        "city": "长春市",
        "counties": ["朝阳区", "经济开发区", "高新区"]
      },
      {
      
      
        "city": "吉林市",
        "counties": ["东城区", "经济开发区", "老城区"]
      },

      {
      
      
        "city": "白山市",
        "counties": ["二道区", "河东区", "高新区"]
      }
    ]
  },
  {
      
      
    "province": "辽宁省",
    "cities": [
      {
      
      
        "city": "沈阳市",
        "counties": ["朝阳区", "经济开发区", "高新区"]
      },
      {
      
      
        "city": "大连市",
        "counties": ["东城区", "经济开发区", "老城区"]
      },
      {
      
      
        "city": "铁岭市",
        "counties": ["二道区", "河东区", "高新区"]
      }
    ]
  },
  {
      
      
    "province": "山东省",
    "cities": [
      {
      
      
        "city": "青岛市",
        "counties": ["朝阳区", "经济开发区", "高新区"]
      },
      {
      
      
        "city": "济南市",
        "counties": ["东城区", "经济开发区", "老城区"]
      },
      {
      
      
        "city": "威海市",
        "counties": ["二道区", "河东区", "高新区"]
      }
    ]
  }
]

  • 然后用Ajax动态获取JSON文件中的数据

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三级联动</title>
  </head>
  <body>
    <!-- 三级联动 - 两个二级联动 -->
    <select id="province"></select>
    <select id="city">
      <option value="">---</option>
    </select>
    <select id="county">
      <option value="">---</option>
    </select>

    <script src="../js/createXMLHttpRequest.js"></script>
    <script>
      // 获取省份下拉列表
      var provinceElement = document.getElementById("province");
      // 1. 当页面加载完毕后，动态获取省份信息
      var xhr = createXMLHttpRequest();
      xhr.onreadystatechange = function () {
       
       
        if (xhr.readyState === 4 && xhr.status === 200) {
       
       
          // 得到服务器端返回的数据
          var response = xhr.responseText;
          // 将JSON字符串转换成JSON对象
          var datas = JSON.parse(response);
          // console.log(data);
          for (var i = 0; i < datas.length; i++) {
       
       
            // console.log(datas[i]);
            var data = datas[i];
            var province = data.province;
            // console.log(data.province);
            // 将数据更新到HTML页面中
            var opt = document.createElement("option");
            opt.setAttribute("value", "province");
            opt.textContent = province;
            provinceElement.appendChild(opt);
          }
        }
      };
      xhr.open("get", "./data/server1.json");
      xhr.send(null);
    </script>
  </body>
</html>

    效果如下

在这里插入图片描述

  • 为省份下拉列表绑定change事件

    provinceElement.addEventListener("change", function () {
      
      
    
});

  • HTMLSelectionElement

    HTMLSelectElement 接口表示一个 <select> HTML 元素。这个元素也通过 HTMLElement 接口从其他 HTML 元素共享所有属性和方法。

代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三级联动</title>
  </head>
  <body>
    <!-- 三级联动 - 两个二级联动 -->
    <select id="province"></select>
    <select id="city">
      <option value="">---</option>
    </select>
    <select id="county">
      <option value="">---</option>
    </select>

    <script src="../js/createXMLHttpRequest.js"></script>
    <script>
      // 获取省份下拉列表
      var provinceElement = document.getElementById("province");
      // 1. 当页面加载完毕后，动态获取省份信息
      var xhr = createXMLHttpRequest();
      xhr.onreadystatechange = function () {
     
     
        if (xhr.readyState === 4 && xhr.status === 200) {
     
     
          // 得到服务器端返回的数据
          var response = xhr.responseText;
          // 将JSON字符串转换成JSON对象
          var datas = JSON.parse(response);
          // console.log(data);
          for (var i = 0; i < datas.length; i++) {
     
     
            // console.log(datas[i]);
            var data = datas[i];
            var province = data.province;
            // console.log(data.province);
            // 将数据更新到HTML页面中
            var opt = document.createElement("option");
            opt.setAttribute("value", "province");
            opt.textContent = province;
            provinceElement.appendChild(opt);
          }
        }
      };
      xhr.open("get", "./data/server1.json");
      xhr.send(null);

      // 为省份下拉列表绑定change事件
      provinceElement.addEventListener("change", function () {
     
     
        // 1. 用户选择的省份信息
        var opts = provinceElement.options;
        console.log(opts);
      });
    </script>
  </body>
</html>

当我更换省份时，会触发change事件，这时输出一个HTMLOptionCollection集合

在这里插入图片描述

这个selectedIndex就是当前所选中省份的索引值

只需使用item()方法即可获取当前所选中的 <select> 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三级联动</title>
  </head>
  <body>
    <!-- 三级联动 - 两个二级联动 -->
    <select id="province"></select>
    <select id="city">
      <option value="">---</option>
    </select>
    <select id="county">
      <option value="">---</option>
    </select>

    <script src="../js/createXMLHttpRequest.js"></script>
    <script>
      // 获取省份下拉列表
      var provinceElement = document.getElementById("province");
      // 1. 当页面加载完毕后，动态获取省份信息
      var xhr = createXMLHttpRequest();
      xhr.onreadystatechange = function () {
     
     
        if (xhr.readyState === 4 && xhr.status === 200) {
     
     
          // 得到服务器端返回的数据
          var response = xhr.responseText;
          // 将JSON字符串转换成JSON对象
          var datas = JSON.parse(response);
          // console.log(data);
          for (var i = 0; i < datas.length; i++) {
     
     
            // console.log(datas[i]);
            var data = datas[i];
            var province = data.province;
            // console.log(data.province);
            // 将数据更新到HTML页面中
            var opt = document.createElement("option");
            opt.setAttribute("value", "province");
            opt.textContent = province;
            provinceElement.appendChild(opt);
          }
        }
      };
      xhr.open("get", "./data/server1.json");
      xhr.send(null);

      // 为省份下拉列表绑定change事件
      provinceElement.addEventListener("change", function () {
     
     
        // 1. 用户选择的省份信息
        var opts = provinceElement.options;
        // console.log(opts);
        var index = provinceElement.selectedIndex; // 被选中<option>的索引值
        var opt = opts.item(index);
        console.log(opt);
      });
    </script>
  </body>
</html>

在这里插入图片描述

  • 二级联动，把省份对应的城市信息在第二个 <select> 中显示

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三级联动</title>
  </head>
  <body>
    <!-- 三级联动 - 两个二级联动 -->
    <select id="province"></select>
    <select id="city">
      <option value="">---</option>
    </select>
    <select id="county">
      <option value="">---</option>
    </select>

    <script src="../js/createXMLHttpRequest.js"></script>
    <script>
      // 获取省份、城市下拉列表
      var provinceElement = document.getElementById("province");
      var cityElement = document.getElementById("city");

      var datas;
      // 1. 当页面加载完毕后，动态获取省份信息
      var xhr = createXMLHttpRequest();
      xhr.onreadystatechange = function () {
       
       
        if (xhr.readyState === 4 && xhr.status === 200) {
       
       
          // 得到服务器端返回的数据
          var response = xhr.responseText;
          // 将JSON字符串转换成JSON对象
          datas = JSON.parse(response);
          // console.log(data);
          for (var i = 0; i < datas.length; i++) {
       
       
            // console.log(datas[i]);
            var data = datas[i];
            var province = data.province;
            // console.log(data.province);
            // 将数据更新到HTML页面中
            var opt = document.createElement("option");
            opt.setAttribute("value", province);
            opt.textContent = province;
            provinceElement.appendChild(opt);
          }
        }
      };
      xhr.open("get", "./data/server1.json");
      xhr.send(null);

      // 为省份下拉列表绑定change事件
      provinceElement.addEventListener("change", function () {
       
       
        // 1. 用户选择的省份信息
        var opts = provinceElement.options; // 获取指定下拉列表所有选项
        // console.log(opts);
        var index = provinceElement.selectedIndex; // 被选中<option>的索引值
        var opt = opts.item(index);
        console.log(opt);
        var provinceName = opt.getAttribute("value");
        // console.log(province);
        // 2. 根据省份信息获取对应的城市信息
        for (var i = 0; i < datas.length; i++) {
       
       
          var data = datas[i];
          var province = data.province;
          if (provinceName === province) {
       
       
            // 获取对应的城市信息
            var cities = data.cities;
            // console.log(cities);
            for (var j = 0; j < cities.length; j++) {
       
       
              var city = cities[j].city;
              // console.log(city);
              // 将数据更新到HTML页面中
              var opt = document.createElement("option");
              opt.setAttribute("value", city);
              opt.textContent = city;
              cityElement.appendChild(opt);
            }
          }
        }
      });
    </script>
  </body>
</html>

    但是当我选择了辽宁省，再选山东省之后，出现辽宁省的城市还在，也就是说，没有删除

在这里插入图片描述

我们需要删除其他省份的城市

因为cityOpts.length要删除数据，那删了之后下一次的cityOpts.length的长度就比上一次的长度少一，也就是说，cityOpts.length的长度的动态变化的，所以最后要写一个k–，跟着cityOpts.length的长度对应的减小即可。

// 将城市下拉列表的选项清空
var cityOpts = cityElement.options;
for (var k = 1; k < cityOpts.length; k++) {
    
    
    cityElement.removeChild(cityOpts[k]);
    k--;
}

实现效果如下

  • 三级联动完整案例

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三级联动</title>
  </head>
  <body>
    <!-- 三级联动 - 两个二级联动 -->
    <select id="province">
      <option value="">---</option>
    </select>
    <select id="city">
      <option value="">---</option>
    </select>
    <select id="county">
      <option value="">---</option>
    </select>

    <script src="../js/createXMLHttpRequest.js"></script>
    <script>
      // 获取省份、城市下拉列表
      var provinceElement = document.getElementById("province");
      var cityElement = document.getElementById("city");
      var countyElement = document.getElementById("county");

      var datas;
      // 1. 当页面加载完毕后，动态获取省份信息
      var xhr = createXMLHttpRequest();
      xhr.onreadystatechange = function () {
       
       
        if (xhr.readyState === 4 && xhr.status === 200) {
       
       
          // 得到服务器端返回的数据
          var response = xhr.responseText;
          // 将JSON字符串转换成JSON对象
          datas = JSON.parse(response);
          // console.log(data);
          for (var i = 0; i < datas.length; i++) {
       
       
            // console.log(datas[i]);
            var data = datas[i];
            var province = data.province;
            // console.log(data.province);
            // 将数据更新到HTML页面中
            var opt = document.createElement("option");
            opt.setAttribute("value", province);
            opt.textContent = province;
            provinceElement.appendChild(opt);
          }
        }
      };
      xhr.open("get", "./data/server1.json");
      xhr.send(null);

      // 为省份下拉列表绑定change事件
      provinceElement.addEventListener("change", function () {
       
       
        // 将城市下拉列表的选项清空
        var cityOpts = cityElement.options;
        for (var k = 1; k < cityOpts.length; k++) {
       
       
          cityElement.removeChild(cityOpts[k]);
          k--;
        }

        // 1. 用户选择的省份信息
        var opts = provinceElement.options; // 获取指定下拉列表所有选项
        // console.log(opts);
        var index = provinceElement.selectedIndex; // 被选中<option>的索引值
        var opt = opts.item(index);
        // console.log(opt);
        var provinceName = opt.getAttribute("value");
        // console.log(provinceName);
        // 2. 根据省份信息获取对应的城市信息
        for (var i = 0; i < datas.length; i++) {
       
       
          var data = datas[i];
          var province = data.province;
          if (provinceName === province) {
       
       
            // 获取对应的城市信息
            var cities = data.cities;
            // console.log(cities);
            for (var j = 0; j < cities.length; j++) {
       
       
              var city = cities[j].city;
              // console.log(city);
              // 将数据更新到HTML页面中
              var opt = document.createElement("option");
              opt.setAttribute("value", city);
              opt.textContent = city;
              cityElement.appendChild(opt);
            }
          }
        }
      });
      // 为城市下拉列表绑定change事件
      cityElement.addEventListener("change", function () {
       
       
        // 将区级下拉列表的选项清空
        var countyOpts = countyElement.options;
        for (var k = 1; k < countyOpts.length; k++) {
       
       
          countyElement.removeChild(countyOpts[k]);
          k--;
        }

        // 1. 用户选择的城市信息
        var opts = cityElement.options; // 获取指定下拉列表所有选项
        // console.log(opts);
        var index = cityElement.selectedIndex; // 被选中<option>的索引值
        var opt = opts.item(index);
        // console.log(opt);
        var cityName = opt.getAttribute("value");
        // console.log(cityName);
        // 2. 根据城市信息获取对应的区级信息
        for (var i = 0; i < datas.length; i++) {
       
       
          var cities = datas[i].cities;
          // console.log(cities);
          for (var x = 0; x < cities.length; x++) {
       
       
            var city = cities[x].city;
            // console.log(city);

            if (cityName === city) {
       
       
              var counties = cities[x].counties;
              // console.log(counties);
              for (var y = 0; y < counties.length; y++) {
       
       
                var county = counties[y];
                // console.log(county);
                // 将数据更新到HTML页面中
                var opt = document.createElement("option");
                opt.setAttribute("value", county);
                opt.textContent = county;
                countyElement.appendChild(opt);
              }
            }
          }
        }
      });
    </script>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/Cool_breeze_/article/details/108365857
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022