Jquery与AJAX实现三级联动总结

abstract：通过本课程的学习，了解了通过AJAX异步请求数据的方法，学会了无刷新页面实现数据的异步加载，通过练习，对异步加载的方法进一步加深练习，也实现了三级联动和获取三级联动选择内容的功能。代码如下：

通过本课程的学习，了解了通过AJAX异步请求数据的方法，学会了无刷新页面实现数据的异步加载，通过练习，对异步加载的方法进一步加深练习，也实现了三级联动和获取三级联动选择内容的功能。代码如下：

      
  省份：  所在城市：  所在地区：  
   

对应的1.json

[ { "proId": 1, "proName": "安徽" }, { "proId": 2, "proName": "江苏" } ]

对应的2.json

[ { "cityId": 1, "cityName": "合肥", "proId":1 }, { "cityId": 2, "cityName": "芜湖", "proId":1 }, { "cityId": 3, "cityName": "南京", "proId":2 }, { "cityId": 4, "cityName": "苏州", "proId":2 } ]

对应的3.json

[ { "areaId": 1, "areaName": "包河区", "cityId": 1 }, { "areaId": 2, "areaName": "蜀山区", "cityId": 1 }, { "areaId": 3, "areaName": "镜湖区", "cityId": 2 }, { "areaId": 4, "areaName": "弋江区", "cityId": 2 }, { "areaId": 5, "areaName": "玄武区", "cityId": 3 }, { "areaId": 6, "areaName": "六合区", "cityId": 3 }, { "areaId": 7, "areaName": "吴江区", "cityId": 4 }, { "areaId": 8, "areaName": "昆山市", "cityId": 4 } ]

代码实现如上。另，实现中有个小问题，如异步获取省份时，每次拼接到的options，打印到控制台的时候，是没有包含空的“”，但是通过加载到页面的方法：$("#pro").html(options);时，就会多拼接两个“”，后面找不到问题，只能通过$("option:not([value])").remove();去掉空白的option。麻烦老师帮忙看看是什么问题导致会多出两个“”，谢谢。

老师辛苦了！

Correcting teacher：韦小宝Correction time：2018-11-10 15:02:53
Teacher's summary：那可不多了一对option嘛，你那里拼接的时候多出来的吧！你把自己的代码好好看看！ 总的来说的写的很不错啦！加油吧！！！

WeChat

share