ajax（省市编码联动）
Posted 冯志国
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax（省市编码联动）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <select class="province"> <option>---选择省---</option> </select> <select class="city"> <option>---选择市---</option> </select> <select class="coding"> <option>---选择编码---</option> </select> </div> </body> <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $.get("city.json",function(data,status){ //get获取数据 if (status) { //找到数据的时候执行 $.each(data.城市代码, function(i,el) { //遍历城市代码 var str = "<option>"+el.省+"</option>"; //找出省 $(".province").append(str); //添加到选择区 }); $(".province").change(function(){ //当省变动的时候 $(".city").html("<option>---选择市---</option>") //清除上一次选的城市 $(".coding").html("<option>---选择编码---</option>") //清除上一次选的编码 $(data.城市代码).each(function(i,el){ if ($(".province").val() == el.省) { //找到所选取的省 因为省和市的下标是一致的 $(el.市).each(function(index,ele){ //遍历所有找到的市 var str = "<option>"+ele.市名+"</option>" //找出市名 $(".city").append(str); }) } }) }) $(".city").change(function(){ //当市变动的时候 $(data.城市代码).each(function(i,el){ if ($(".province").val() == el.省) { $(el.市).each(function(index,ele){ if ($(".city").val() == ele.市名){ //找到选取的市名 var str = "<option>"+ele.编码+"</option>" //编码跟市名同级 $(".coding").html(str); //替换编码的内容 } }) } }) }) } }) </script> </html>
以上是关于ajax（省市编码联动）的主要内容，如果未能解决你的问题，请参考以下文章