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);不知道怎么写了,现在客户催着呢,今天必须做完,大侠们,救救俺吧……

解决方案 »

  1. 先把思路理清楚就可以了,关键是ajax操作:php+ajax实现二级联动菜单首先实现联动的文件有三个,我这里命名分别为Category.html Category.js   Category.php其中Category.html 是用户查看的页面,看到的只是联动的效果Category.js 是实现处理的文件,当选择了某一项之后激发事件,调用相关的函数及回调函数Category.php是取数据的页面,用来负责取数据,然后以XML的形式返回由于我的数据是从数据库中取出,由于用户选取了某项之后,这一项有一个值,这里我想的是option中的text和value的值不是一样的情况!所以我把表建立如下:CREATE TABLE `category` (                
                `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以及火狐下测试通过!如果有什么问题可以一次讨论
     
      

  2. 经典的php二级联动菜单
    <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重新组织菜单选项
      

类似问题 »