<!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（省、市、编码联动）
原文地址：https://www.cnblogs.com/f-z-g-boke/p/9709033.html