CREATE TABLE `city` ( `ID` int(3) NOT NULL auto_increment COMMENT '自增ID', `parentID` int(3) NOT NULL COMMENT '父ID', `title` varchar(50) character set gbk collate gbk_bin NOT NULL COMMENT '省份或是城市', PRIMARY KEY (`ID`));-- -- 導出表中的數據 `city`-- INSERT INTO `city` (`ID`, `parentID`, `title`) VALUES (1, 0, 江蘇),(2, 0, 廣東),(3, 2, 珠海),(4, 2, 廣州),(5, 1, 蘇州),(6, 1, 南京);頁面：index.php HTML code
<html>
![]()
<head>
![]()
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
![]()
<title>Ajax聯動菜單</title>
![]()
</head>
![]()
<body>
![]()
<?php
![]()
mysql_connect("localhost", "root", "123");
![]()
mysql_select_db("city");
![]()
mysql_query("set names gb2312");
![]()
$sql = "Select * From city where parentID=0";
![]()
$result = mysql_query($sql);
![]()
?>
![]()
<form name="form1" method="post" action="">
![]()
<select name="select1" id="select1" onChange="startRequest('select2',this.value)">
![]()
<option value=0>省份</option>
![]()
<?php
![]()
while($arr = mysql_fetch_array($result))
![]()
{
![]()
?>
![]()
<option value="<?php echo $arr['ID'];?>"><?php echo $arr['title'];?></option>
![]()
<?php
![]()
}
![]()
?>
![]()
</select>
![]()
</p>
![]()
<p>
![]()
<select name="select2" id="select2">
![]()
<option>城市</option>
![]()
</select>
![]()
![]()
</form>
<script language="javascript">
//var ab = new Array();
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
var tag;
function startRequest(item,url) {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
document.getElementById(item).options.length = 1;
//var url = document.form1.select1.value;
//var qurl = "getCities.php?countryCode="+url;
var qurl = "getCities.php?id="+url+"&time="+new Date().getTime();
tag=item;
xmlHttp.open("GET", qurl, true);
xmlHttp.send(null);
//setTimeout("startRequest()",2000);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var obj = document.getElementById(tag);
if(xmlHttp.responseText.length==0) {
obj.style.display="none";
}
else{
obj.style.display="";
eval(xmlHttp.responseText);
}
}
}
}
![]()
</script>
![]()
</body>
![]()
</html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Ajax聯動菜單</title> </head> <body> <?php mysql_connect("localhost", "root", "123"); mysql_select_db("city"); mysql_query("set names gb2312"); $sql = "Select * From city where parentID=0"; $result = mysql_query($sql);?><form name="form1" method="post" action=""> <select name="select1" id="select1" onChange="startRequest('select2',this.value)"> <option value=0>省份</option> <?php while($arr = mysql_fetch_array($result)) { ?> <option value="<?php echo $arr['ID'];?>"><?php echo $arr['title'];?></option> <?php } ?> </select> </p> <p> <select name="select2" id="select2"> <option>城市</option> </select> </form> <script language="javascript">
//var ab = new Array();
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
var tag;
function startRequest(item,url) {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
document.getElementById(item).options.length = 1;
//var url = document.form1.select1.value;
//var qurl = "getCities.php?countryCode="+url;
var qurl = "getCities.php?id="+url+"&time="+new Date().getTime();
tag=item;
xmlHttp.open("GET", qurl, true);
xmlHttp.send(null);
//setTimeout("startRequest()",2000);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var obj = document.getElementById(tag);
if(xmlHttp.responseText.length==0) {
obj.style.display="none";
}
else{
obj.style.display="";
eval(xmlHttp.responseText);
}
}
}
}
</script> </body> </html> 頁面：getCities.php PHP code
<?php header("Content-type:text/html; charset=gb2312");if(isset($_GET['id'])){ mysql_connect("localhost", "root", "123"); mysql_select_db("city"); mysql_query("set names gb2312"); $id = $_GET['id']; $sql = "select * from city where parentID = ".$id; $result = mysql_query($sql); while($arr = mysql_fetch_array($result)) { echo "obj.options[obj.options.length] = new Option('".$arr["title"]."','".$arr["ID"]."'); "; }} ?>