JQ三级联动的写法
今天和大家分享下三级联动的写法
思路：1.通过AJAX获取到json文件里的数据,GET方法
2.在获取到的数据里找到省份添加到下拉菜单中
3.当省份标签被改变时change事件通过当前省份与市的共同数组下标找到对应的市区；
实例：HTML
<!DOCTYPE html> <html> <head> <script src="js/jquery-3.3.1.js"></script> <meta charset="UTF-8"> <title></title> </head> <body> <select id="province">//创建省份下拉菜单 <option>--省份--</option> </select> <select id="city">//创建市下拉菜单 <option>--市--</option> </select> <select id="code">//创建邮编下拉菜单 <option>--邮编--</option> </select> </body> </html>
JQ 第一级联动省份
<script> //----------------------------联动第一级------------------------------------------------------- $.get("js/city.json",function(data,status){//通过GET方法获取到json文件里的数据 $(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据 var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签 }) }) </script>
第二级联动市区： 当省级下拉菜单被改变时触发change事件实现二级联动
<script> $.get("js/city.json",function(data,status){//通过GET方法获取到json文件里的数据 var provinceId = null;//纪录共同的数组下标值 //----------------------------联动第一级------------------------------------------------------- $(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据 var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签 }); //----------------------------联动第二级------------------------------------------------------- $("#province").change(function(){//当省级下拉菜单被改变触发change事件 $("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单 $("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单 provinceId = $("#province").val();//获取到省和市的共同数组下标 $(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市 var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中 $("#city").append(str);//添加option标签 }) }); </script>
第三级联动邮编： 当市级级下拉菜单被改变时触发change事件实现三级联动
<script> $.get("js/city.json",function(data,status){//通过GET方法获取到json文件里的数据 var provinceId = null;//纪录共同的数组下标值 //----------------------------联动第一级------------------------------------------------------- $(data.城市代码).each(function(i,el){ //通过JQ循环遍历数据 var str = "<option value=" + i + ">" + data.城市代码[i].省 + "</option>"//把data的省份数据添加到下拉菜单中 $("#province").append(str);//添加option标签 }); //----------------------------联动第二级------------------------------------------------------- $("#province").change(function(){//当省级下拉菜单被改变触发change事件 $("#city").html("<option>--市--</option>");//当省级下拉菜单被改变时清空市级下拉菜单 $("#code").html("<option>--邮编--</option>");//当省级下拉菜单被改变时清空邮编下拉菜单 provinceId = $("#province").val();//获取到省和市的共同数组下标 $(data.城市代码[provinceId].市).each(function(index,ele){//循环共同数组的市 var str = "<option>" + ele.市名 + "</option>"//把data的市数据添加到下拉菜单中 $("#city").append(str);//添加option标签 }) }); //----------------------------联动第三级------------------------------------------------------- $("#city").change(function(){ $("#code").html(""); $(data.城市代码[provinceId].市).each(function(index,ele){ if($("#city").val()==ele.市名){ console.log(ele.编码); var str = "<option>" + ele.编码 + "</option>"//把data的省份数据添加到下拉菜单中 $("#code").append(str);//添加option标签 } }) }) }) </script>
