1 视频中的三级联动案例的功能需求是什么
页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中出现对应的该市下面的区/县信息
2 视频中的需求分析的内容是
①创建页面:页面有三个下拉框,分别为省、市、区/县
②页面加载成功发起ajax请求,请求省的信息,并将相应结果 填充到省下拉框中
③选择省出发新的js函数执行,该函数中发起新的ajax请求, 请求该省下的市信息,并将响应数据填充数据到市下拉框
④选择市出发新的js函数执行,该函数中发起新的ajax请求,请求该市下的区/县信息,并将响应数据填充数据到区/县下拉框
3 预期效果
4 步骤
ajax之三级联动数据库设计和实现
①完成三级联动数据库表设计。
②完成三级联动案例的SQL语句设计。
③将area.sql文件导入到数据库中。
ajax之三级联动代码实现获取所有的省信息
①完成前台jsp页面的创建。
②在select.jsp中声明ajax代码请求省信息
③完成请求省信息的后台功能,并能alert出请求的省信息。
ajax之三级联动实现省信息填充和市信息功能
①将省信息填充到省下拉框中
②完成市信息下拉框功能
③ajax之三级联动代码完整实现
④完成城镇信息下拉框功能?
问题:目前实现的三级联动中为什么选择省信息后,市信息为改变但是城镇信息还是不变?如何解决?
在手动给省下拉框添加信息后会触发省的change事件,从而会自动的给市添加信息。在此状态下给市添加信息不会触发市的change事件,从而不会自动的给县添加信息。
解决:给省、市代码块添加change时间,只要监听事件改变就会出发,从而产生联动
根据视频讲解完成代码的封装