abstract:听了老师讲解的思路以后,自己动手实战的时候出了点小问题,就是在循环value值的时候 拼接字符串的时候出了点问题,导致市的值获取不到,通过排查发现是value出了问题。修改以后,功能实现。<!DOCTYPE html> <html lang="en"> <head> <meta charset="
听了老师讲解的思路以后,自己动手实战的时候出了点小问题,就是在循环value值的时候 拼接字符串的时候出了点问题,导致市的值获取不到,通过排查发现是value出了问题。修改以后,功能实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 请选择: 省:<select name="pro" id="pro"></select> 市:<select name="shi" id="city"></select> 县:<select name="xian" id="area"></select> </body> <script src="js/jquery-3.3.1.js"></script> <script> $(function () { $.getJSON('inc/1.json', function (data) { let option = '<option value="">请选择</option>'; // console.log(data); $.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) { 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(){ $.getJSON('inc/3.json',function(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>
Correcting teacher:天蓬老师Correction time:2019-01-28 09:04:47
Teacher's summary:总结教训, 下次再遇到这样问题,就知道怎么做的了, 所以,光看是不行的, 一定要动手