function change_area(){
var strURL = "area.php?id=" + Math.random();
var strData = "bas_mid=" + encodeURIComponent($("searchArea").value);
new Ajax.Request(strURL, {method: 'post', parameters: strData, onComplete: showReceive});
}
function showReceive(httpObj){
text = httpObj.responseText;
alert(text.length);
for(var i = 1,len = text.length; i < len; i++){
$("serCity").options[1] = new Option(text[1].txt, text[1].val);
} $tb_bas = new tb_bas();
$tb_bas->getSubBaseByID($postDat['bas_mid']);
$arrlist = $tb_bas->Datalist;
for($i=0;$i<sizeof($arrlist);$i++){
$loop1 =$arrlist[$i]["bas_chinese_name"];
$loop1s[]=$loop1;
}
print_r($loop1s);不知道怎么写了，现在客户催着呢，今天必须做完，大侠们，救救俺吧……
`CategoryID` int(4) NOT NULL,
`CategoryName` varchar(32) NOT NULL,
`CategoryLevel` varchar(10) NOT NULL,
`CategoryValue` int(8) NOT NULL,
PRIMARY KEY (`CategoryID`)
)说明：CategoryID为主键，自增 CategoryName为类的名字 CategoryLevel为类的级别 比如first second，CategoryValue为类的值，这里大类和小类的值是相同的，大类的值是唯一的！比如我要选取大类的话，只需要根据`CategoryLevel` = ’first‘ and `CategoryValue` = '某一个值' 如果选取该类下的小类的话只需要把First改成second即可！如果用户选择之后要存储大类的话，可以直接存储CategoryValue ， 而如何存储小类的话，可以直接存储CategoryID.不过这张表只适合二级联动的！如果要增加三级联动的话 就要想想表怎么设计！表里面已有数据如下：其实从数据库取数据的应该都没什么问题，关键是怎么样通过JS返回，怎么样读取返回的XML文件！不过这里我用的都是英文，但是用汉字就显示问号！我已经设置了header("Content-Type:text/xml;charset=gb2312");和request.overrideMimeType('text/xml;charset=gb2312');可是还是不行！Category.html的内容如下： 这里大类为了方便我就直接写了 ，然后有一个onchange事件，二级菜单默认是不显示的，只有当点击某一项之后 如果有值才显示！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>PHP+Ajax二级联动菜单</title>
<script language="javascript" src="./Category.js"></script>
</head>
<body>
<select id="FirstCategory" style="width:150px;" onchange="ShowCategory(this.value)">
<option selected="selected" value="">请选择大类</option>
<option value="10000">FirstCategory</option>
<option value="10001">SecondCategory</option>
<option value="10002">ThirdCategory</option>
</select>
<select id="SecondCategory" style="width:200px; display:none;"></select></body>
</html>
用户点击了之后激发onchange事件，然后调用JS Category.js里的代码如下// 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 ShowCategory(x)
{
var URL = "Category.php?value=" + x;
Request.open("GET",URL,true);
Request.onreadystatechange = ShowSecondCategory;
Request.send(null);
}
function ShowSecondCategory()
{
if(Request.readyState == 4 && Request.status == 200)
{
document.getElementById("SecondCategory").style.display = '';
//读取返回的xml数据
var myData = Request.responseXML.getElementsByTagName("row");
//如果数据长度为0 则表示没有取到数据，则不显示二级菜单
if(myData.length == 0)
{
document.getElementById("SecondCategory").style.display = 'none';
}
var myStr = new Array(); //创建一数组用来存放text
var myValue = new Array(); //创建一数据用来存放value
for(var i = 0;i<myData.length;i++)
{
myStr[i] = myData[i].firstChild.data;
myValue[i] = myData[i].getAttribute("value");
}
document.getElementById("SecondCategory").options.length = 0;
for(var j = 0;j<myStr.length;j++)
{
document.getElementById("SecondCategory").options[document.getElementById("SecondCategory").options.length] = new Option(myStr[j],myValue[j]);
}
}
}js读取从Category.php返回的XML数据<?php
header("Content-Type:text/xml;charset=gb2312");
$value = $_GET['value'];
$link = mysql_connect("localhost","root","******") or die("链接数据库失败");
mysql_select_db("test",$link);
$sql = "select CategoryID,CategoryName from Category where CategoryLevel='second' and CategoryValue='".$value."'";
$result = mysql_query($sql,$link);
$data = '';
while(list($CategoryID,$CategoryName) = mysql_fetch_row($result))
{
$data .= "<row value='{$CategoryID}'>{$CategoryName}</row>";
}
echo "<data>".$data."</data>";mysql_close($link);
?>
依然，此程序在IE7以及火狐下测试通过！如果有什么问题可以一次讨论
<script language = "JavaScript">
var onecount;
onecount=0;
subcat = new Array();
<?
mysql_connect("localhost","root","");
mysql_select_db( "test" );
$sql = "select * from subject";
$result = mysql_query( $sql );
$count = 0;
while($res = mysql_fetch_row($result)){
?>
subcat[<?=$count?>] = new Array("<?=$res[0]?>","<?=$res[1]?>","<?=$res[2]?>");
<?
$count++;
}
echo "onecount=$count;";
?>
//联动函数
function changelocation(locationid)
{
document.myform.ctype.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
//var newOption1=new Option(subcat[i][1], subcat[i][0]);
//document.all.ctype.add(newOption1);
document.myform.ctype.options[document.myform.ctype.length] = new Option(subcat[i][1], subcat[i][0]);
}
}
}
</script>
<form method="post" name="myform" action="ru_query.php">
<select name="type" onChange="changelocation(document.myform.type.options[document.myform.type.selectedIndex].value)" size="1">
<option selected value="">请指定主分类</option>
<?
$sql = "select * from depart";
$result = mysql_query( $sql );
while($res = mysql_fetch_row($result)){
?>
<option value="<? echo $res[0]; ?>"><? echo $res[1]; ?></option>
<? } ?>
</select>
<select name="ctype">
<option selected value="">请指定小分类</option>
</select>
<input type="submit" name="Submit" value="搜索">
</form> 数据库机构如下表depart--------departID departName表subject-------subjectID subjectName departID
1.通过精选取得数据库的字段并且存入数组
2.定义自定义函数，遍历数组并且使用echo命令把$参数转化成js可以使用的变量
3.在js中使用<?自定义函数?>参数进行传递
4.通过js的new Option重新组织菜单选项