省市区三级联动

最新推荐文章于 2025-08-04 20:59:31 发布

银色-

最新推荐文章于 2025-08-04 20:59:31 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_72238093/article/details/128709434

文章展示了一个使用HTML和JavaScript实现的省市区三级联动下拉菜单的效果。当选择不同的省份时，对应的市和区会自动更新。通过改变select元素的option值来控制联动行为，并在选择项改变时动态生成下级菜单内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：
通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。

原理：通过value值来控制三个下拉菜单的联动，先进行清空再赋值option

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form>
    <select name="" id="first" onchange="setSecond(this.value)">
        <option value="1">省</option>
        <option value="2">福建</option>
        <option value="3">江苏</option>
    </select>
    <select name="" id="second">
        <option value="">市</option>
    </select>
    <select name="" id="third">
        <option value="">区</option>
    </select>
 
    <script>
           function setSecond(value){
        var val = value;
        if(val==1){
            var sec = document.getElementById("second");
            var thi=document.getElementById("third");
            sec.options.length=0; //清空二级菜单项
            thi.options.length=0;//清空三级菜单项
            sec.options[0] = new Option("市","shi");
            thi.options[0] = new Option("区","qu");
        }
        if(val == 2){
          var sec = document.getElementById("second");
          var thi=document.getElementById("third");
          sec.options.length=0; 
          thi.options.length=0;
          sec.options[0] = new Option("福州市","fuzhoushi");
          thi.options[0]=new Option("马尾区","maweiqu");
        }
        if(val==3){
          var sec = document.getElementById("second");
          var thi=document.getElementById("third");
          sec.options.length=0; 
          thi.options.length=0;
          sec.options[0] = new Option("扬州","yangzhou");
          thi.options[0]=new Option("邗江区","hanjiangqu");
        }
      }
    </script>
   </form>
</body>
</html>