ajax（省、市、編碼聯動）
阿新 • • 發佈：2018-09-26
har append city ack 取數據 dex val 執行 set
<!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（省、市、編碼聯動）