[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 )

接上一篇博客。

实现带缓存的仿亚马逊下拉面板

效果图：

图1 初始

图2 点击省份

图3 选择省份

图4 如果有第四级菜单

说明：该功能模块是固定前三极菜单，第四级菜单如果存在则动态加载 (  不足：没有做到所有菜单完全动态加载 )。

图5

细节流程：

① 点击固定菜单时发生的动作：

　　■ 如果存在下拉面板，则下拉面板消失

■ 如果不存在下拉面板，则查看是否有缓存的下级菜单数据

　　■ 如果没有缓存数据,则通过 ajax 获取,同时缓存数据

■ 如果存在缓存数据，则直接读取缓存数据

■ 删除后级的菜单隐藏域信息、菜单数据以及菜单，同时后级菜单选择框的文字与样式还原成默认，删除动态加载的菜单选择框

② 点击固定菜单下单条数据时发生的动作：

■ 单条数据名称添加进相应选择框

■ 单条数据的 id 存入页面相应隐藏域

■ 对应的下拉面板消失

　　■ 请求下级菜单的数据

　　■ 把该数据追加至相应下拉面板中

　　■ 同时把该数据缓存在页面中

③ 点击最后一个固定菜单下单条数据时发生的动作：

　　■ 单条数据名称添加进城市选择框

　　■ 单条数据 id 存入页面隐藏域

　　■ 对应的下拉面板面板消失

　　■ 检测是否含有下级数据，如果有则追加动态菜单框

　　■ 请求动态菜单的数据

　　■ 把该数据追加至相应下拉面板中

　　■ 同时把该数据缓存在页面中

④ 点击动态加载的菜单下单条数据时发生的动作：

■ 单条数据名称添加进相应选择框

■ 单条数据的 id 存入页面相应隐藏域

■ 对应的下拉面板消失

addr.html 代码：

欢迎朋友们交流讨论。