ajax下拉框回显数据_058ajax之三级联动案例分析

1 视频中的三级联动案例的功能需求是什么

页面中有三个下拉框选项&＃xff0c;分别为省下拉框&＃xff0c;市下拉框&＃xff0c;区/县下拉框选择省&＃xff0c;则市下拉框中出现对应的该省下的市信息&＃xff0c;选择市&＃xff0c;则区/县下拉框中出现对应的该市下面的区/县信息

2 视频中的需求分析的内容是

①创建页面&＃xff1a;页面有三个下拉框&＃xff0c;分别为省、市、区/县

②页面加载成功发起ajax请求&＃xff0c;请求省的信息&＃xff0c;并将相应结果 填充到省下拉框中

③选择省出发新的js函数执行&＃xff0c;该函数中发起新的ajax请求&＃xff0c; 请求该省下的市信息&＃xff0c;并将响应数据填充数据到市下拉框

④选择市出发新的js函数执行&＃xff0c;该函数中发起新的ajax请求&＃xff0c;请求该市下的区/县信息&＃xff0c;并将响应数据填充数据到区/县下拉框

3 预期效果

4 步骤

ajax之三级联动数据库设计和实现

①完成三级联动数据库表设计。

②完成三级联动案例的SQL语句设计。

③将area.sql文件导入到数据库中。

ajax之三级联动代码实现获取所有的省信息

①完成前台jsp页面的创建。

②在select.jsp中声明ajax代码请求省信息

③完成请求省信息的后台功能&＃xff0c;并能alert出请求的省信息。

ajax之三级联动实现省信息填充和市信息功能

①将省信息填充到省下拉框中

②完成市信息下拉框功能

③ajax之三级联动代码完整实现

④完成城镇信息下拉框功能?

问题&＃xff1a;目前实现的三级联动中为什么选择省信息后&＃xff0c;市信息为改变但是城镇信息还是不变&＃xff1f;如何解决&＃xff1f;

在手动给省下拉框添加信息后会触发省的change事件&＃xff0c;从而会自动的给市添加信息。在此状态下给市添加信息不会触发市的change事件&＃xff0c;从而不会自动的给县添加信息。

解决&＃xff1a;给省、市代码块添加change时间&＃xff0c;只要监听事件改变就会出发&＃xff0c;从而产生联动

根据视频讲解完成代码的封装