怎么把这个二级联动变成N级？

index.php<?php
define('IN_CITY',true);
include('../../include/common.php');
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax联动下拉框菜单</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<select id="state" name="state" onChange="getcity()">
<?php
$sql = "SELECT * FROM city_area WHERE parentid = '0'";
$query = $db->query($sql);
while($rows = $db->loop_fetch_array($query)){
echo "<option value=$rows[areaid]>$rows[areaname]</option>";
}
?>
</select>
<select name="city" id="city">
<option value="">please select state first</option>
</select>
</body>
</html>
ajax.jsvar xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
var xmlHttp;
try{
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                     "MSXML2.XMLHTTP.5.0",
                                     "MSXML2.XMLHTTP.4.0",
                                     "MSXML2.XMLHTTP.3.0",
                                     "MSXML2.XMLHTTP",
                                     "Microsoft.XMLHTTP");
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) {
try {
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {}
}
}
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}function getcity(){
var selectObj = document.getElementById("state");
var url = "ajax_city.php?stateid=" +escape(selectObj.options[selectObj.selectedIndex].value);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = getcityOk;
xmlHttp.send(null);
}function getcityOk(){
if (xmlHttp.readyState == 4) {
var response = xmlHttp.responseText;
try{
var classObj = document.getElementById("city");classObj.outerHTML=response;
}
catch(exception){}
}
}ajax_city.php<?php
header("Content-type:text/html;charset=gbk");
define('IN_CITY',true);
include('../../include/common.php');$stateid=$_GET['stateid'];if(isset($stateid))
{
$sql = "SELECT * FROM city_area WHERE parentid = '$stateid'";
$query = $db->query($sql);
echo "<select name=city>";
while($rows = $db->loop_fetch_array($query)){
echo "<option value=$rows[areaid]>$rows[areaname]</option>";
}
echo "</select>";
}?>最好是把关键代码写出来，我菜。。

解决方案 »

  1.   

    select由<select id="state" name="state" onChange="getcity()">中的getcity触发ajax,从后台获取由city构造的option串,然后传给前台.
    这块是关键.
    如果是N级,需要
    <select name="city" id="city" onchange='getprovince()'>加上getprovince触发获取省市的数据.
    依此类推.
      

  2.   

    前台要构造树
    在节点上执行ajax,如果有下一级，主添加子节点
      

  3.   

    首先看下我的JS错没有？红色为新加var xmlHttp = createXmlHttpRequestObject();
    function createXmlHttpRequestObject(){
    var xmlHttp;
    try{
    xmlHttp = new XMLHttpRequest();
    }
    catch(e)
    {
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                         "MSXML2.XMLHTTP.5.0",
                                         "MSXML2.XMLHTTP.4.0",
                                         "MSXML2.XMLHTTP.3.0",
                                         "MSXML2.XMLHTTP",
                                         "Microsoft.XMLHTTP");
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) {
    try {
    xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
    }
    catch (e) {}
    }
    }
    if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
    else
    return xmlHttp;
    }function getcity(){
    var selectObj = document.getElementById("state");
    var url = "ajax_city.php?stateid=" +escape(selectObj.options[selectObj.selectedIndex].value);
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = getcityOk;
    xmlHttp.send(null);
    }function getarea(){
    var selectObj = document.getElementById("city");
    var url = "ajax_city.php?areaid=" +escape(selectObj.options[selectObj.selectedIndex].value);
    xmlHttp.open("GET", url, true);
    xmlHttp.onreadystatechange = getareaOk;
    xmlHttp.send(null);
    }    function getcityOk(){
    if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    try{
    var classObj = document.getElementById("city");classObj.outerHTML=response;
    }
    catch(exception){}
    }
    }function getareaOk(){
    if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    try{
    var classObj = document.getElementById("area");classObj.outerHTML=response;
    }
    catch(exception){}
    }
    }