????:project.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax實戰(zhàn)之省、市、區(qū)三級聯(lián)動菜單</title> <script type="text/javascript&
project.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax實戰(zhàn)之省、市、區(qū)三級聯(lián)動菜單</title> <script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script> </head> <body> 省:<select name="" id="province"></select> 市:<select name="" id="city"></select> 區(qū):<select name="" id="area"></select> <p id="attr"></p> <script type="text/javascript"> $(function(){ $.getJSON('province.json',function(data){ //console.log(data) let option = '<option value="">請選擇(省)</option>' $.each(data,function(i){ option+= '<option value="'+data[i].proId+'">'+data[i].proName+'</option>' }) $('#province').html(option) }) $('#province').change(function(){ console.log($(this).find(':selected').text()) //查看當前選擇的省的名稱 $('#attr').html($(this).find(':selected').text()) $.getJSON('city.json',function(data){ let option = '<option value="">請選擇(市)</option>' $.each(data,function(i){ if(data[i].proId==$('#province').val()){ //下一級省id必須和上一級省id相同 option+='<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>' } }) $('#city').html(option) }) }) $('#city').change(function(){ console.log($(this).find(':selected').text()) //查看當前選擇的市的名稱 $.getJSON('area.json',function(data){ let option = '<option value="">請選擇(區(qū))</option>' $.each(data,function(i){ if(data[i].cityId==$('#city').val()){ option+= '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>' } }) $('#area').html(option) }) }) $('#area').change(function(){ console.log($(this).find(':selected').text()) //查看當前選擇的區(qū)的名稱 }) }) </script> </body> </html> province.json: [ { "proId":1, "proName":"安徽" }, { "proId":2, "proName":"江蘇" } ] city.json: [ { "cityId":1, "cityName":"合肥", "proId":1 }, { "cityId":2, "cityName":"蕪湖", "proId":1 }, { "cityId":3, "cityName":"南京", "proId":2 }, { "cityId":4, "cityName":"蘇州", "proId":2 } ] area.json: [ { "areaId":1, "areaName":"包河區(qū)", "cityId":1 }, { "areaId":2, "areaName":"蜀山區(qū)", "cityId":1 }, { "areaId":3, "areaName":"鏡湖區(qū)", "cityId":2 }, { "areaId":4, "areaName":"弋江區(qū)", "cityId":2 }, { "areaId":5, "areaName":"玄武區(qū)", "cityId":3 }, { "areaId":6, "areaName":"六合區(qū)", "cityId":3 }, { "areaId":7, "areaName":"昆山市", "cityId":4 }, { "areaId":8, "areaName":"吳江區(qū)", "cityId":4 } ]
1. $.getJSON()函數(shù)專用于解析從服務器上返回的json格式的內(nèi)容
2. 其實它就是$.get()函數(shù)中,將返回數(shù)據(jù)類型dataType設置為'json'格式時的簡寫函數(shù)
3. $.getJSON()需要讀取json格式的數(shù)據(jù),為簡化起見,直接創(chuàng)建一個json文件,實際開發(fā)中應該從接口獲取
4. $.each() 專用來遍歷對象或者數(shù)組的全局函數(shù)
語法 :$.each( object, callback )
?? ???:滅絕師太?? ??:2019-01-08 09:17:46
???? ??:完成的很好!作業(yè)代碼思路清晰,花了功夫的,繼續(xù)加油!