abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax实现三级联动</title> </head> <body> 省:<select id="pro"&
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax实现三级联动</title> </head> <body> 省:<select id="pro"></select> 市:<select id="city"></select> 区县:<select id="area"></select> <p>ggg</p> </body> <script src="../jq/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // /$(选择器).css('属性名','属性值') // {'属性名1':'属性值1','属性名2':'属性值2'} $(function (){ $.getJSON('../inc/1.json', function (data) { let option = '<option value="">请选择</option>'; $.each(data,function(i){ option+='<option value="'+data[i].proId+'">'+ data[i].proName+'</option>'; }) $('#pro').html(option); }) }); $('#pro').change(function(){ console.log($(this).find(':selected').text());//查看已选到 $.getJSON('../inc/2.json', function (data) { console.log(2,data) let option = '<option value="">选择市</option>'; $.each(data,function(i){ if(data[i].proId==$('#pro').val()) { option+='<option value="'+data[i].cityId+'">'+ data[i].cityName+'</option>'; } }) $('#city').html(option); }) }); $('#city').change(function(){ console.log($(this).find(':selected').text());//查看已选到 $.getJSON('../inc/3.json', function (data) { console.log(2,data) let option = '<option value="">选择市</option>'; $.each(data,function(i){ if(data[i].cityId==$('#city').val()) { option+='<option value="'+data[i].areaId+'">'+ data[i].areaName+'</option>'; } }) $('#area').html(option); }) }); </script> </html>
[ { "proId":1, "proName":"四川" }, { "proId":2, "proName":"广西" } ]
[ { "cityId":1, "cityName":"南宁", "proId":2 }, { "cityId":2, "cityName":"钦州", "proId":2 }, { "cityId":3, "cityName":"成都", "proId":1 }, { "cityId":4, "cityName":"达州", "proId":1 } ]
[ { "areaId":1, "cityId":1, "areaName":"棉江区" }, { "areaId":2, "cityId":1, "areaName":"新区" }, { "areaId":3, "cityId":2, "areaName":"新区" }, { "areaId":4, "cityId":2, "areaName":"新区" }, { "areaId":5, "cityId":3, "areaName":"大树" }, { "areaId":6, "cityId":4, "areaName":"昆山区" } ]
Correcting teacher:韦小宝Correction time:2018-12-17 09:24:18
Teacher's summary:不错不错!写的很棒!这种通过接口似的获取数据在日常的开发中是非常常用的!