省市区三级联动

最新推荐文章于 2024-07-12 10:43:17 发布

l20040121_

最新推荐文章于 2024-07-12 10:43:17 发布

阅读量176

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/l20040121_/article/details/128678748

版权

需求：通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
实现原理：
1.先设置三个select选择框用来容纳省市区
2.通过数组放置所需省市区
3.通过遍历进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="FriSt()">
<select name="" id="one" onchange="Fh()">
  <option value="city">--请选择省份</option>
</select>
<select name="" id="two" onchange="a()">
  <option value="city">--请选择城市</option>
</select>
<select name="" id="tree">
    <option value="city">--请选择县</option>
</select>
<script>
    var cityL = new Array();
    var cityLa = new Array();
    cityL ['江苏省'] = ['南京','徐州'];
    cityL ['河北省'] = ['北京','天津'];
    for (var i in j) {
  
    }
  
    function Fh(){
        var s = document.getElementById("one").value;
        var c = document.getElementById("two");
        var p = document.getElementById("tree");
        p.innerHTML="";
        c.innerHTML="";
        for (var i in cityL) {
            if (i==s){
                c.add(new Option("--选择城市--"));
                p.add(new Option("--选择县--"));
                for (var j in cityL[i]) {
                    c.add(new Option(cityL[i][j]))
                }
            }
        }
    }
  function a(){
      cityLa ['南京'] = ['123','321'];
      cityLa ['徐州'] = ['贾汪区','铜山区'];
      cityLa ['北京'] = ['789','999'];
      cityLa ['天津'] = ['666','787'];
      var c = document.getElementById("two").value;
      var p = document.getElementById("tree");
      p.innerHTML="";
      for (let i in cityLa) {
          if (i==c){
              p.add(new Option("--选择县--"));
              for (let j in cityLa[i]) {
                  p.add(new Option(cityLa[i][j]));
              }
          }
      }
  }
    function FriSt(){
        var s = document.getElementById("one")
        for (let i in cityL) {
            s.appendChild(new Option(i,i,null))
        }
    }
  </script>
  
  
</body>
</html>

效果展示：

QQ录屏20230113193809

l20040121_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市区三级联动

需求：通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。1.先设置三个select选择框用来容纳省市区。QQ录屏20230113193809。2.通过数组放置所需省市区。3.通过遍历进行选择。"--选择城市--"
复制链接

扫一扫