今天和大家分享下三級聯動的寫法
思路：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>