Jquery实现的省市区三级联动

最新推荐文章于 2025-07-03 16:16:28 发布

FutureLilian

最新推荐文章于 2025-07-03 16:16:28 发布

阅读量4.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Demo---jquery 文章标签： jquery 三级联动 append

本文链接：https://blog.youkuaiyun.com/FutureLilian/article/details/77579724

Demo---jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用jQuery实现省市区三级联动的简洁方法，通过.append()方法动态追加选项，避免复杂的逻辑判断。同时展示了如何设置默认选中的城市，并解释了其在实际应用中的意义，如在用户地址管理中的应用。

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

之前用javascript写了个三级联动，代码量较多，不够优雅简洁，这里介绍一种jquery的写法，大家可以做个比较。

链接请戳javascript实现省市区三级联动

还是先看效果吧。

页面初始化加载效果

选择省市之后

下面是代码：

<body>
省份：<select id="province" ></select>
城市：<select id="city"></select>
区/县<select id="area"></select>


<script type="text/javascript">

var provinceArr=["四川","重庆","云南"];
var cityArr=[["成都","达州","绵阳"],
             ["万州","沙坪坝"],
             ["昆明","大理","丽江"]];
var areaArr=[[["锦江区","青羊区","金牛区","高新区"],["达县","渠县"],["绵阳市","南山"]],
             [["五桥","百安"],["西永","西科"]],
             [["昆明市","花城"],["洱海","苍山","下关"],["幕府","玉龙县"]]];

   $().ready(function(){
       //初始化省份
       for(var i=0;i<provinceArr.length;i++){
               $("#province").append("<option value='"+(i+1)+"'>"+provinceArr[i]+"</option>");   
       }

     //初始化城市
     $("#city").append("<option value='0'>请选择城市</option>");
       for(var i=0;i<cityArr[0].length;i++){
               $("#city").append("<option value='"+(i+1)+"'>"+cityArr[0][i]+"</option>");
       }

     //初始化区域
     $("#area").append("<option value='0' >请选择区域 </option>");
       for(var i=0;i<cityArr[0][0].length;i++){
               $("#area").append("<option value='"+(i+1)+"'>"+areaArr[0][0][i]+"</option>");
       }



       //下面进行province的change事件切换设置
       $("#province").change(function(){
           //先清除城市 和区域里下拉列表里的所有
          $("#city").empty();
          $("#area").empty();

          //添加一个下标为0，value为0的potion，文字为请选择城市，在省份的下拉列表被选中时候显示
          $("#city").append("<option value='0'>请选择城市</option>");

           //设置所选择的option的当前下标，对应的cityArr里的下标，并赋值
           var proValue=$(this).val();
           var curCity=cityArr[proValue-1];
           for(var i=0;i<curCity.length;i++){
               $("#city").append("<option value='"+(i+1)+"'>"+curCity[i]+"</option>");
           }
       });

     //下面进行city的change事件切换设置
       $("#city").change(function(){
         //先清除区域里下拉列表里的所有
           $("#area").empty();

         //添加一个下标为0，value为0的option，文字为请选择区域，在城市的下拉列表被选中时候显示
           $("#area").append("<option value='0' >请选择区域 </option>");

         //获取此时province和city所对应的下标
         var proValue=$("#province").val();
         var cityValue=$(this).val();
         var curArea=areaArr[proValue-1][cityValue-1];
         for(var i=0;i<curArea.length;i++){
             $("#area").append("<option value='"+(i+1)+"'>"+curArea[i]+"</option>");
         }
       });
   });          
</script>
</body>

这里的原理是利用 .append()方法向select选框下追加子节点,不需要判断父节点是否被选中，也不需要重复的用嵌套for()来追加元素内容，从而达到精简代码，减少逻辑调用的作用。

这边文章到这里其实已经可以结束了，但如果我们要自定义默认选中的城市呢。这个也简单。
我们用三个变量来存储我们的初始选择：

var p=2;
var c=1;
var a=2;

注意，在这里进行第一次省（p）的判断：

for(var i=0;i<provinceArr.length;i++){
           /* 这里进行了一个判断，如果i的值与传入的value值相等，则选中value值相等的那一项 */
           if(p==i+1){ 
               $("#province").append("<option value='"+(i+1)+"' selected='selected'>"+provinceArr[i]+"</option>");
           }else{
               $("#province").append("<option value='"+(i+1)+"'>"+provinceArr[i]+"</option>");   
           }
       }

同理，对城市（c）和区县（a）进行判断，选择

//初始化城市
     $("#city").append("<option value='0'>请选择城市</option>");
       for(var i=0;i<cityArr[p-1].length;i++){
           if(c==i+1){
               $("#city").append("<option value='"+(i+1)+"' selected='selected'>"+cityArr[p-1][i]+"</option>");   
           }else{
               $("#city").append("<option value='"+(i+1)+"'>"+cityArr[p-1][i]+"</option>");
           }
       }

     //初始化区域
     $("#area").append("<option value='0' >请选择区域 </option>");
       for(var i=0;i<cityArr[p-1][c-1].length;i++){
           if(a==i+1){
               $("#area").append("<option value='"+(i+1)+"' selected='selected'>"+areaArr[p-1][c-1][i]+"</option>");
           }else{
               $("#area").append("<option value='"+(i+1)+"'>"+areaArr[p-1][c-1][i]+"</option>");
           }
       }