php+javascript实现三级联动

实现三级联动，我是采用了地区数据源存储在mysql数据库中，这样方便后台配置数据，然后将数据从数据库中读出来，将数据保存为json格式写入一个js文件，通过js代码处理json格式的数据并且显示在联动框中。

先给出数据库架构和测试数据以及php文件和json格式文件，js处理json数据文件过几天给出，最近有点忙。

php文件

class Start extends CI_Controller
{
function __construct()
{
parent::__construct();
$this->load->database();

}

function cas()
{
$res = $this->db->get('areas')->result_array();
foreach($res as $key => $value)
{
if($value['parent_id'] == '0')
{
$arr['province'][$value['area_id']] = $value['area_name'];

}
}

foreach($res as $key => $value)
{
foreach($arr['province'] as $k => $val)
{
if($k == $value['parent_id'])
{
$arr['city'][$value['area_id']] = $value['area_name'];
}
}
}

foreach($res as $key => $value)
{
foreach($arr['city'] as $k => $val)
{
if($k == $value['parent_id'])
{
$arr['area'][$value['area_id']] = $value['area_name'];
}
}
}

$jsroot ='./js/area.js';
$str = 'var data = '.json_encode($arr);
file_put_contents($jsroot,$str);

//			var_dump($arr);
}
}

以上是处理数据的文件。写入js的json文件样式如下表

var data = {
"province" : {
"33" : "zhejiang",
"34" : "shandong"
},
"city" : {
"3301" : "hangzhou",
"3302" : "ningbo",
"3401" : "jinan",
"3402" : "qingdao"
},
"area" : {
"330101" : "xihuqu",
"330102" : "binjiangqu",
"330201" : "beilunqu",
"330202" : "yinchengqu",
"340101" : "lixiaqu",
"340102" : "lichengqu",
"340201" : "sifangqu",
"340202" : "laoshanqu"
}
}

数据库文件结构和测试数据给出

-- phpMyAdmin SQL Dump
-- version 3.3.7
-- http://www.phpmyadmin.net
--
-- 主机: localhost
-- 生成日期: 2011 年 07 月 14 日 15:28
-- 服务器版本: 5.0.90
-- PHP 版本: 5.2.14

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- 数据库: `area`
--

-- --------------------------------------------------------

--
-- 表的结构 `areas`
--

CREATE TABLE IF NOT EXISTS `areas` (
`id` int(11) NOT NULL auto_increment,
`area_id` int(11) default NULL,
`area_name` varchar(40) default NULL,
`parent_id` int(11) default NULL,
`pinyin` varchar(40) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

--
-- 转存表中的数据 `areas`
--

INSERT INTO `areas` (`id`, `area_id`, `area_name`, `parent_id`, `pinyin`) VALUES
(1, 33, 'zhejiang', 0, 'zhejiang'),
(2, 3301, 'hangzhou', 33, 'hangzhou'),
(3, 330101, 'xihuqu', 3301, 'xihuqu'),
(4, 330102, 'binjiangqu', 3301, 'binjiangqu'),
(5, 3302, 'ningbo', 33, 'ningbo'),
(6, 330201, 'beilunqu', 3302, 'beilunqu'),
(7, 330202, 'yinchengqu', 3302, 'yinchengqu'),
(8, 34, 'shandong', 0, 'shandong'),
(9, 3401, 'jinan', 34, 'jinan'),
(10, 340101, 'lixiaqu', 3401, 'lixiaqu'),
(11, 340102, 'lichengqu', 3401, 'lichengqu'),
(12, 3402, 'qingdao', 34, 'qingdao'),
(13, 340201, 'sifangqu', 3402, 'sifangqu'),
(14, 340202, 'laoshanqu', 3402, 'laoshanqu');

我用的框架是codeigniter的，大家可以参考相关类库和资料。

本文作者：爱帮竞人才网创始人 高学平