Jquery实现的省市区三级联动

来源：互联网发布：为啥叫程序员叫程序猿编辑：程序博客网时间：2024/05/13 02:26

之前用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>");           }       }

其他地方不需改动，我们现在再来看看效果，根据p、c、a的值和数组里对比，页面应该默认选中
重庆—万州—百安

网页上是什么呢
个性化初始化

验证自定义成功。

那这样的修改有何意义呢。

当我们在某些网站填写个人地址时，第一次是由我们自己选择，这时系统已经把我操作的数据存入数据库了。当我下次进行数据修改时，系统默认地址显示的就是我上次存入的数据，原理就是我上面的操作（不过我目前道行不够，还未进行数据库操作~~）。

到此这篇文章正式结束啦~
谢谢各位大佬点击~~

阅读全文

0 0