军哥谈CI框架之JQuery实现全国城市级联菜单的应用

当一丝丝秋风吹过，便带来了秋的消息。它展开了笑颜，轻轻地拂去夏日的烦躁，而秋的夜晚，军哥不再寂寞，只因一切有你们做伴……

好了，不抒情了，免得有淫鸡皮疙瘩一身，那就要不得了~~哈哈哈

这一回啊，军哥要讲一讲如何在CI框架中实现基于JQuery的全国城市级联菜单应用。城市级联菜单效果如何在框架中去实现，这个军哥相信有不少朋友非常关心。之前有用高老师的Brophp框架做过一次，军哥也一并贴出来以供大家下载。brophp中实现城市级联菜单


一、先来说一下思路吧。

1、先准备好地区数据表（全国这么多的城市、乡镇是不会无缘无故的跑出来滴）。
area表结构如下：

1. `id` mediumint(8) unsigned NOT NULL auto_increment PRIMARY KEY, #地区ID
2. `name` char(255) NOT NULL, #地区名称
3. `level` tinyint(4) unsigned NOT NULL default '0' COMMENT '级别', #地区级别
4. `upid` mediumint(8) unsigned NOT NULL default '0' COMMENT '从属于', #所属父地区
5. `list` smallint(6) NOT NULL default '0' COMMENT '排序' #地区排序

当然，有了这样的表结构之后，那么多的数据不可能一一手工去创建，关键也没这个必要，军哥也准备了sql文件帮助大家快速建表。详见ci_city.sql文件。示例代码

2、写操作area数据表的Model类
3、写控制器
4、写视图
5、写JQuery和Ajax

以上只是一个大概的写代码顺序，实际中肯定是相互之间交错进行开发的。


二、接下来，进入到军哥有图有真相的环节啦，相信已经有淫迫不及待了吧，嘻嘻~~看图

1、初始化页面效果图：

2、点击某一省份效果图：

3、点击某一城市/地区效果图：
4、点击某一县市效果图（包括有乡镇的县市和无乡镇的县市）：

三、图看完了，接着上一些干货啦，这次还有比较详细的注释哟~~


1、模型（即Model，源码在 application/models文件夹） ：

1. if (!defined('BASEPATH'))
2. exit('No direct script access allowed');
5. /**
6. * @author JayJun
7. * @copyright 2012.09.05
8. */
11. class M_area extends CI_Model {
12. //获取省份、城市/地区、县市及乡镇信息
13. function get($type,$upid = 0) {
14. $data = '';
15. switch ($type) {
16. //查询所有省份
17. case 'province':
18. $this->db->select('id,name,level,upid,list');
19. $data = $this->db->get_where('area',array('upid'=>0));
20. break;
21. //查询某一省份下的所有城市/城区
22. //或查询某一城市/城区下的所有县市
23. //或查询某一县市下的所有乡镇
24. case 'city':
25. $this->db->select('id,name,level,upid,list');
26. $data = $this->db->get_where('area',array('upid'=>$upid));
27. break;
28. }
29. return $data;
30. }
31. }

2、控制器（源码在 application/controllers文件夹）：

1. if (!defined('BASEPATH'))
2. exit('No direct script access allowed');
3. /**
4. * @author JayJun
5. * @copyright 2012.09.05
6. */
7. class area extends CI_Controller {
8. // 初始化
9. function __construct() {
10. parent::__construct();
11. //配置文件获取应用根目录
12. $this->base_url = $this->config->item("base_url");
13. //加载地区表Model
14. $this->load->model('M_area');
15. }
16. //显示城市选择下拉框页
17. function index() {
18. $data['base_url'] = $this->base_url;
19. //获取所有的省份信息，省份的upid均为0，此时可以不写第二个参数，默认为0
20. $data['province'] = $this->M_area->get('province');
21. //获取北京所有的城市/地区信息，以便于初始化载入这些信息，北京的ID值为1
22. $data['beijing'] = $this->M_area->get('city',1);
23. $this->load->view("area_index",$data);
24. }
26. //获取ajax提交upid值产生的option
27. function select() {
28. //获取get方式提交来的upid
29. $upid = $this->input->get('upid');
30. if ($upid != '')
31. {
32. $data['city'] = $this->M_area->get('city',$upid);
33. $this->load->view("area_select",$data);
34. }
35. }
36. }

3、视图（源码在 application/views文件夹）
area_index.php文件：

1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
11. 所在地区：

    foreach ($province->result() as $item): ?> name; ?> endforeach; ?> 请选择 foreach ($beijing->result() as $item): ?> name; ?> endforeach; ?> 请选择 请选择

area_select.php文件:

1. if($city->result()) {
2. foreach ($city->result() as $item):
3. echo "".$item->name."";
4. endforeach;
5. }

4、JQuery（写在area_index.php文件中）：

好了，不知道你学会没有，至少实现思路有了吧，另外，军哥相信没有代码100%不存在Bug的，所以如果你发现Bug，欢迎不吝赐教~~

嘿嘿，当然军哥在写的时候，其实已经将一些重大的Bug做了修补，比方说用户当点击某一城市地区之后，又点击了它的“请选择”之后出现的问题，还有就是当用户点击县市下拉框的时候，有的县市是有乡镇数据，而有的却没有乡镇数据等情况，军哥都做了妥善的处理~~


四、应用
（1）、先下载附件，解压之后，拷贝到网站根目录下；
（2）、找到文件ci_city.sql，建库建表；
（3）、修改配置文件CI_city/application/config/database.php，只需设置$db['default']['password'] ='你的数据库密码'; ，大概第10行；
（4）、浏览器输入 即可访问。


示例代码

原文地址：