Jquery实现的省市区三级联动
之前⽤javascript写了个三级联动，代码量较多，不够优雅简洁，这⾥介绍⼀种jquery的写法，⼤家可以做个⽐较。链接请戳
还是先看效果吧。
下⾯是代码：
<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();
$("#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>");
jquery是什么有什么作用}
}
//初始化区域
$("#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的值和数组⾥对⽐，页⾯应该默认选中
重庆—万州—百安
⽹页上是什么呢
验证⾃定义成功。
那这样的修改有何意义呢。
当我们在某些⽹站填写个⼈地址时，第⼀次是由我们⾃⼰选择，这时系统已经把作的数据存⼊数
据库了。当我下次进⾏数据修改时，系统默认地址显⽰的就是我上次存⼊的数据，原理就是我上⾯的操作（不过我⽬前道⾏不够，还未进⾏数据库操作~~）。
到此这篇⽂章正式结束啦~
谢谢各位⼤佬点击~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。