JQ三级联动
2018-12-06 本文已影响35人
感觉不错哦
准备工作复制我的代码即可
地区数据 area.js
var provinceList = [
{name:'浙江', cityList:[
{name:'杭州市', areaList:['上城区','下城区','江干区','拱墅区','西湖区','滨江区','萧山区','余杭区','桐庐县','淳安县','建德市','富阳市','临安市']},
{name:'宁波市', areaList:['海曙区','江东区','江北区','北仑区','镇海区','鄞州区','象山县','宁海县','余姚市','慈溪市','奉化市']},
{name:'温州市', areaList:['鹿城区','龙湾区','瓯海区','洞头县','永嘉县','平阳县','苍南县','文成县','泰顺县','瑞安市','乐清市']},
{name:'嘉兴市', areaList:['秀城区','秀洲区','嘉善县','海盐县','海宁市','平湖市','桐乡市']},
{name:'湖州市', areaList:['吴兴区','南浔区','德清县','长兴县','安吉县']},
{name:'绍兴市', areaList:['越城区','绍兴县','新昌县','诸暨市','上虞市','嵊州市']},
{name:'金华市', areaList:['婺城区','金东区','武义县','浦江县','磐安县','兰溪市','义乌市','东阳市','永康市']},
{name:'衢州市', areaList:['柯城区','衢江区','常山县','开化县','龙游县','江山市']},
{name:'舟山市', areaList:['定海区','普陀区','岱山县','嵊泗县']},
{name:'台州市', areaList:['椒江区','黄岩区','路桥区','玉环县','三门县','天台县','仙居县','温岭市','临海市']},
{name:'丽水市', areaList:['莲都区','青田县','缙云县','遂昌县','松阳县','云和县','庆元县','景宁畲族自治县','龙泉市']}
]},
{name:'广东', cityList:[
{name:'广州市', areaList:['东山区','荔湾区','越秀区','海珠区','天河区','芳村区','白云区','黄埔区','番禺区','花都区','增城市','从化市']},
{name:'韶关市', areaList:['武江区','浈江区','曲江区','始兴县','仁化县','翁源县','乳源瑶族自治县','新丰县','乐昌市','南雄市']},
{name:'深圳市', areaList:['罗湖区','福田区','南山区','宝安区','龙岗区','盐田区']},
{name:'珠海市', areaList:['香洲区','斗门区','金湾区']},
{name:'汕头市', areaList:['龙湖区','金平区','濠江区','潮阳区','潮南区','澄海区','南澳县']},
{name:'佛山市', areaList:['禅城区','南海区','顺德区','三水区','高明区']},
{name:'江门市', areaList:['蓬江区','江海区','新会区','台山市','开平市','鹤山市','恩平市']},
{name:'湛江市', areaList:['赤坎区','霞山区','坡头区','麻章区','遂溪县','徐闻县','廉江市','雷州市','吴川市']},
{name:'茂名市', areaList:['茂南区','茂港区','电白县','高州市','化州市','信宜市']},
{name:'肇庆市', areaList:['端州区','鼎湖区','广宁县','怀集县','封开县','德庆县','高要市','四会市']},
{name:'惠州市', areaList:['惠城区','惠阳区','博罗县','惠东县','龙门县']},
{name:'梅州市', areaList:['梅江区','梅 县','大埔县','丰顺县','五华县','平远县','蕉岭县','兴宁市']},
{name:'汕尾市', areaList:['主城区','海丰县','陆河县','陆丰市']},
{name:'河源市', areaList:['源城区','紫金县','龙川县','连平县','和平县','东源县']},
{name:'阳江市', areaList:['江城区','阳西县','阳东县','阳春市']},
{name:'清远市', areaList:['清城区','佛冈县','阳山县','连山壮族瑶族自治县','连南瑶族自治县','清新县','英德市','连州市']},
{name:'东莞市', areaList:['石龙镇','石排镇','茶山镇','企石镇','桥头镇','东坑镇','横沥镇','常平镇','虎门镇','长安镇','沙田镇','厚街镇','寮步镇','大岭山镇','大朗镇','黄江镇','樟木头镇','谢岗镇','塘厦镇','清溪镇','凤岗镇','麻涌镇','中堂镇','高埗镇','石碣镇','望牛墩镇','洪梅镇','道滘镇']},
{name:'中山市', areaList:['石岐街道','东区街道','西区街道','南区街道','五桂山街道','火炬开发区','黄圃镇','南头镇','东凤镇','阜沙镇','小榄镇','东升镇','古镇镇','横栏镇','三角镇','民众镇','南朗镇','港口镇','大涌镇','沙溪镇','三乡镇','板芙镇','神湾镇','坦洲镇']},
{name:'潮州市', areaList:['湘桥区','潮安县','饶平县']},
{name:'揭阳市', areaList:['榕城区','揭东县','揭西县','惠来县','普宁市']},
{name:'云浮市', areaList:['云城区','新兴县','郁南县','云安县','罗定市']}
]},
]
从网上找了两条测试即可
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select{
padding:5px 0;
}
.outer{
width:500px;
margin:20px auto;
}
</style>
</head>
<body>
<div class="outer">
<select id="province">
<option value="请选择">请选择</option>
</select>
<select id="city">
<option value="请选择">请选择</option>
</select>
<select id="town">
<option value="请选择">请选择</option>
</select>
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./area.js"></script> //引入上方数据
<script>
</script>
</html>
开始JS部分，此处用的jq是cdn 复制即可
<script>
var province=$("#province"),city=$("#city"),town=$("#town"); //取到三个select元素，记住了代表的元素
</script>
写个方法用来动态加载options
function addSearch(el,value){ // el代表元素 value 表示我们获取的对象值
var optionStr="";
optionStr="<option value="+value+">"+value+"</option>";
el.append(optionStr);//在元素后面添加标签
}
首先我们先加载省区
for(var i=0;i<provinceList.length;i++){ //上方引入的js地区数组名，获取它的长度遍历
addSearch(province,provinceList[i].name);//这里的province表示 第一个id为province的select标签
}
当前的JS代码 如果看不懂JQ代码可以翻阅JQ在线手册
<script>
var province=$("#province"),city=$("#city"),town=$("#town");
function addSearch(el,value){
var optionStr="";
optionStr="<option value="+value+">"+value+"</option>";
el.append(optionStr);
}
for(var i=0;i<provinceList.length;i++){
addSearch(province,provinceList[i].name);
}
</script>
我们看看效果
省区已经加载出来了，这步没看懂的建议再浏览一下
接下来做一个移除效果，当我们选择省区的时候，后面的两项清空，当我们选择第二项市区的时候，第三项清空，提前写一个方法方便调用
function removeEl(el){
el.find("option").remove(); //清空el下的option元素
var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
el.append(optionStar); //增加 请选择的选项 插入
}
接下来插入市区选项数据
var provinceVal,cityVal,cityIndex; //定义三个全局变量 获取当前的数据
province.on('change',function(){
provinceVal=$(this).val();//获取当前的省区name
$.each(provinceList,function(i,item){ // 遍历循环provinceList数组 i 是索引 item是索引值
if(provinceVal==item.name){ //遍历数组，如果找到当前的省区与数组中的name对应
cityIndex=i;
return cityIndex //停止循环 返回索引
}
}); //此时当我们选择省区时 确定了数组中的索引位置
//此时我们清空后面两个select的选择
removeEl(city);
removeEl(town);
//既然确认了索引 就可以添加数据到第二个select
$.each(provinceList[cityIndex].cityList,function(i,item){
addSearch(city,item.name)//将id为city的select标签增加option选项
})
})
此时页面效果
第二个选项已经填充完成，并且改变第一个选项第二个选项会清空，此时的js代码
<script>
var province=$("#province"),city=$("#city"),town=$("#town");
function addSearch(el,value){
var optionStr="";
optionStr="<option value="+value+">"+value+"</option>";
el.append(optionStr);
}
for(var i=0;i<provinceList.length;i++){
addSearch(province,provinceList[i].name);
}
function removeEl(el){
el.find("option").remove();
var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
el.append(optionStar);
}
var provinceVal,cityVal,cityIndex; //定义三个全局变量 获取当前的数据
province.on('change',function(){ //当省区选项发生改变的时候
provinceVal=$(this).val();//获取当前的省区name
$.each(provinceList,function(i,item){ // 遍历循环provinceList数组 i 是索引 item是索引值
if(provinceVal==item.name){ //遍历数组，如果找到当前的省区与数组中的name对应
cityIndex=i;
return cityIndex //停止循环 返回索引
}
}); //此时当我们选择省区时 确定了数组中的索引位置
//此时我们清空后面两个select的选择
removeEl(city);
removeEl(town);
//既然确认了索引 就可以添加数据到第二个select
$.each(provinceList[cityIndex].cityList,function(i,item){
addSearch(city,item.name)//将id为city的select标签增加option选项
})
})
</script>
还差最后一个，其实很简单了，一样的逻辑
city.on("change",function(){ //当市区选项发生改变的时候
cityVal=$(this).val(); //获取当前的市区选项
removeEl(town); //此时我们清空第三个select的option
$.each(provinceList[cityIndex].cityList,function(i,item){//此时cityIndex依旧是之前的cityIndex,遍历该索引下的对象的cityList数组
if(cityVal == item.name){ //找到第二个select的val与数组中的val相同的
for(var n=0;n<item.areaList.length;n++){ //遍历增加数据
addSearch(town,item.areaList[n])
}
}
});
});
此时的js代码
<script>
var province=$("#province"),city=$("#city"),town=$("#town");
function addSearch(el,value){
var optionStr="";
optionStr="<option value="+value+">"+value+"</option>";
el.append(optionStr);
}
for(var i=0;i<provinceList.length;i++){
addSearch(province,provinceList[i].name);
}
function removeEl(el){
el.find("option").remove();
var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
el.append(optionStar);
}
var provinceVal,cityVal,cityIndex; //定义三个全局变量 获取当前的数据
province.on('change',function(){
provinceVal=$(this).val();//获取当前的省区name
$.each(provinceList,function(i,item){ // 遍历循环provinceList数组 i 是索引 item是索引值
if(provinceVal==item.name){ //遍历数组，如果找到当前的省区与数组中的name对应
cityIndex=i;
return cityIndex //停止循环 返回索引
}
}); //此时当我们选择省区时 确定了数组中的索引位置
//此时我们清空后面两个select的选择
removeEl(city);
removeEl(town);
//既然确认了索引 就可以添加数据到第二个select
$.each(provinceList[cityIndex].cityList,function(i,item){
addSearch(city,item.name)//将id为city的select标签增加option选项
})
})
city.on("change",function(){ //当市区选项发生改变的时候
cityVal=$(this).val(); //获取当前的市区选项
removeEl(town); //此时我们清空第三个select的option
$.each(provinceList[cityIndex].cityList,function(i,item){//此时cityIndex依旧是之前的cityIndex,遍历该索引下的对象的cityList数组
if(cityVal == item.name){ //找到第二个select的val与数组中的val相同的
for(var n=0;n<item.areaList.length;n++){ //遍历增加数据
addSearch(town,item.areaList[n])
}
}
});
});
</script>
主要是思路，可能你的后台是个新手，数据写的不是很好
