首页>>表单>>ajax php二级联动菜单(2013-09-09)

ajax php二级联动菜单

 二级联动菜单 ajax载入的

数据库结构如下

bigclass 表

`bigclassid` int(11) NOT NULL auto_increment,

`bigclassname` varchar(300) collate utf8_unicode_ci NOT NULL, PRIMARY KEY (`bigclassid`)

smallclass表

`smallclassid` int(11) NOT NULL auto_increment,

`smallclassname` varchar(200) collate utf8_unicode_ci NOT NULL,

`bigclassid` int(11) NOT NULL,

 

 

ajax php二级联动菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 js代码

JavaScript Code
  1. <script language="javascript" >  
  2. var http_request=false;  
  3.   function send_request(url){//初始化，指定处理函数，发送请求的函数  
  4.     http_request=false;  
  5.  //开始初始化XMLHttpRequest对象  
  6.  if(window.XMLHttpRequest){//Mozilla浏览器  
  7.   http_request=new XMLHttpRequest();  
  8.   if(http_request.overrideMimeType){//设置MIME类别  
  9.     http_request.overrideMimeType("text/xml");  
  10.   }  
  11.  }  
  12.  else if(window.ActiveXObject){//IE浏览器  
  13.   try{  
  14.    http_request=new ActiveXObject("Msxml2.XMLHttp");  
  15.   }catch(e){  
  16.    try{  
  17.    http_request=new ActiveXobject("Microsoft.XMLHttp");  
  18.    }catch(e){}  
  19.   }  
  20.     }  
  21.  if(!http_request){//异常，创建对象实例失败  
  22.   window.alert("创建XMLHttp对象失败！");  
  23.   return false;  
  24.  }  
  25.  http_request.onreadystatechange=processrequest;  
  26.  //确定发送请求方式，URL，及是否同步执行下段代码  
  27.     http_request.open("GET",url,true);  
  28.  http_request.send(null);  
  29.   }  
  30.   //处理返回信息的函数  
  31.   function processrequest(){  
  32.    if(http_request.readyState==4){//判断对象状态  
  33.      if(http_request.status==200){//信息已成功返回，开始处理信息  
  34.    document.getElementById(reobj).innerHTML=http_request.responseText;  
  35.   }  
  36.   else{//页面不正常  
  37.    alert("您所请求的页面不正常！");  
  38.   }  
  39.    }  
  40.   }  
  41.   function getclass(obj){  
  42.    var pid=document.form1.select1.value;  
  43.    document.getElementById(obj).innerHTML="<option>loading...</option>";  
  44.    send_request('doclass.php?pid='+pid);  
  45.    reobj=obj;  
  46.   }  
  47.    
  48. </script>  

 doclass.php

 

PHP Code
  1. <?php  
  2.   header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码  
  3.   $pid=$_GET['pid'];  
  4.     # FileName="Connection_php_mysql.htm"  
  5.     # Type="MYSQL"  
  6.     # HTTP="true"  
  7. include("conn.php");  
  8.       
  9.   mysql_query("set names 'GBK'");  
  10. mysql_select_db($database_lr, $lr);  
  11.   $sql="select * from smallclass where bigclassid='$pid'";  
  12.   $result=mysql_query($sql);  
  13.   while($rows=mysql_fetch_array($result)){  
  14.    echo "<option value=".$rows['smallclassid'].">";  
  15.       echo $rows['smallclassname'];  
  16.    echo "</option>n";  
  17.   }  
  18. ?>  
XML/HTML Code
  1. <select name="select1" id="class1" style="width:100;" onChange="getclass('class2');">  
  2. <option selected value="">选择大类</option>  
  3.           
  4.  <?  
  5.    $sql = "select * from bigclass order by sort";  
  6.    $result = mysql_query( $sql );  
  7.    while($res = mysql_fetch_row($result)){  
  8.  ?>  
  9.     <option value="<? echo $res[0]; ?>"><? echo $res[1]; ?></option>  
  10.   <? } ?>  
  11. </select>  
  12. <select name="select2" id="class2" style="width:100;"  onChange="getclass('class3');">  
  13. </select> 
  14.  

原文地址:http://www.freejs.net/article_biaodan_28.html