建立数据库表，如果是少量的数据就先全加载进去
SQL 语句
/*
SQLyog 企业版 - MySQL GUI v5.02
主机 - 5.0.45 : 数据库 - ld
*********************************************************************
服务器版本 : 5.0.45
*/
create database if not exists `ld`;
USE `ld`;
/*数据表 `class` 的表结构*/
DROP TABLE IF EXISTS `class`;
CREATE TABLE `class` (
`cid` int(10) NOT NULL auto_increment,
`class` varchar(100) NOT NULL COMMENT '类别',
`sid` int(10) NOT NULL default '0',
PRIMARY KEY (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=gbk;
/*数据表 `class` 的数据*/
insert into `class` values (1,'A',0), (2,'B',0), (3,'C',0), (4,'D',0), (5,'aa',1), (6,'ab',1), (7,'ac',1), (8,'ad',1), (9,'ba',2), (10,'bb',2), (11,'ca',3), (12,'da',4);
------------------------------------------------------------------------------------------------------------------------------------
执行以上的 SQL 语句，就建立好了我们的数据库( `ld` )和表( `class` )
建立 index.php , 将其当成我们的主页，代码如下(在搜索一级分类的时候，把搜索的 PHP 代码和 页面HTML 代码掺写在了一块儿，看的有点乱，如果你做的二级联动，一级分类是固定的话，就可以直接把一级分类写在页面上，而不用再去搜索，还有，若使用了代码分离的框架，例如Smarty，也可以使用它来分离 PHP 和 HTML 代码，这里不作介绍):
------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PHP+Ajax 二级联动菜单测试</title>
<script language="javascript" src="ld.js"></script>
</head>
<body>
<?php
//连接数据库
$con = mysql_connect('localhost', 'root', 'hicc');
if(!$con){
die('Could not connect:'.mysql_error());
}
mysql_select_db("ld", $con);
//搜索一级分类
$sql = "SELECT cid,class FROM class WHERE `sid` = '0'";
$result = mysql_query($sql);
?>
<form name="myform">
<b>Please Select A Big Class:</b><!--一级下拉框-->
<select name="users" onchange="showsecond(this.value)">
<?php
while($row = mysql_fetch_array($result)){
?>
<option value="<?=$row['cid'];?>"><?=$row['class'];?></option>
<?
}
?>
</select>
<select id="second" style="width:200px; display:none;"></select>
</form>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------
建立 out.php ,作为与 Ajax 互动的文件，代码如下：
------------------------------------------------------------------------------------------------------------------------------------
<?php
//必要的
header("Content-Type:text/xml;charset=gb2312");
$value = $_GET['value'];
$link = mysql_connect("localhost","root","hicc") or die("链接数据库失败");
mysql_select_db("ld", $link);
$sql = "SELECT cid, class FROM class WHERE `sid` = '".$value."'";
$result = mysql_query($sql, $link);
$data = '';
while(list($cid, $class) = mysql_fetch_row($result)){
$data .= "<row value='{$cid}'>{$class}</row>";
}
//要显示的信息
echo "<data>".$data."</data>";
mysql_close($link);
?>
------------------------------------------------------------------------------------------------------------------------------------
建立 ld.js,这是我们的重头戏，代码如下:
------------------------------------------------------------------------------------------------------------------------------------
//This Is JavaScript Document
function CreateXHR(){
var request;
//返回浏览器的名称
var browser = navigator.appName;
//使用IE，则使用XMLHttp对象
if(browser == "Microsoft Internet Explorer"){
var arrVersions = ["Microsoft.XMLHttp", "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
for (var i=0; i < arrVersions.length; i++){
try{
//从中找到一个支持的版本并建立XMLHttp对象
request = new ActiveXObject(arrVersions[i]);
return request;
}
catch(exception){
//忽略，继续
}
}
}
else{
//否则返回一个XMLHttpRequest对象
request = new XMLHttpRequest();
if(request.overrideMimeType){
request.overrideMimeType('text/xml;charset=gb2312');
}
return request;
}
}
//实例化
var Request = new CreateXHR();
function showsecond(x){
var URL = "out.php?value=" + x;
Request.open("GET", URL, true);
Request.onreadystatechange = Show_Second;
Request.send(null);
}
function Show_Second(){
if(Request.readyState == 4 && Request.status == 200){
//显示二级框
document.getElementById("second").style.display = '';
//读取返回的xml数据
var myData = Request.responseXML.getElementsByTagName("row");
//如果数据长度为0，则表示没有取到数据，则不显示二级菜单
if(myData.length == 0){
document.getElementById("second").style.display = 'none';
}
var myStr = new Array();
var myValue = new Array();
for(var i = 0; i < myData.length; i++){
myStr[i] = myData[i].firstChild.data;
myValue[i] = myData[i].getAttribute("value");
}
document.getElementById("second").options.length = 0;
for(var j = 0;j<myStr.length;j++){
document.getElementById("second").options[document.getElementById("second").options.length] = new Option(myStr[j], myValue[j]);
}
}
}
------------------------------------------------------------------------------------------------------------------------------------
OK ！
点击第一个下拉框，第二个也会跟着联动！
