php+ajax实现三级联动(以省市县三级联动为例).doc

二级联动和三级联动的效果在 web 上很常见,在网上查了半天资料,写的都不是很清楚, 无奈,自己写了个,使用 php+ajax 实现三级联动,以最常见的省市县三级联动为例! 案例涉及到数据库,数据库设计如下: 首先创建一个 test 数据库,内容如下: CREATE TABLE IF NOT EXISTS `province` ( `province_id` int(2) NOT NULL AUTO_INCREMENT, `province_name` varchar(20) NOT NULL, PRIMARY KEY (`province_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ; INSERT INTO `province` (`province_id`, `province_name`) VALUES (1, ' 安徽'), (2, ' 浙江'); CREATE TABLE IF NOT EXISTS `city` ( `city_id` int(4) NOT NULL AUTO_INCREMENT, `city_name` varchar(20) NOT NULL, `province_id` int(4) NOT NULL, PRIMARY KEY (`city_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ; INSERT INTO `city` (`city_id`, `city_name`, `province_id`) VALUES (1, ' 合肥', 1), (2, ' 安庆', 1), (3, ' 南京', 2), (4, ' 徐州', 2); CREATE TABLE IF NOT EXISTS `county` ( `county_id` int(4) NOT NULL AUTO_INCREMENT, `county_name` varchar(20) NOT NULL, `city_id` int(4) NOT NULL, PRIMARY KEY (`county_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ; INSERT INTO `county` (`county_id`, `county_name`, `city_id`) VALUES (1, ' 怀宁', 2), (2, ' 望江', 2), (3, ' 肥东', 1), (4, ' 肥西', 1); 对数据库说明: 我创建了三张表, 分别是省( province ),市( city ),县( county ), 插入了几条测试数据, 当然你也可以设计一张表, 效率当然没一张表好, 所以不建议使用, 看你个人****惯。实现过程并不是很难,思路如下: 1) 初始化所有的省份,这个可以直接从数据库中查询出来省份 2 )当用户选择省份的时候触发事件,把当前的省份的 id 通过 ajax 发出请求传递到服务端的程序中 3 )服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 4 )客户端获取服务端的数据,进行必要的处理显示出来创建 sel