实用的mysql ajax php 三级级联下拉框.doc
实用的mysql ajax php 三级级联下拉框 1,昨天弄了一个简单的三级级联下拉框。超级实用。index.php：html head meta http-equiv="Content-Type"content="text/html；charset=gb2312"title Ajax联动菜单/title script language="javascript"type="text/javascript"src="aa.js"/script/head body form label select name="sel"id="sel"onChange="showMenu(this.value)；"option一级分类/option?php$conn=mysql_connect('localhost','root','')or die('Could not connect：'.mysql_error()；mysql_select_db('fitment',$conn)or die('Can't use database：'.mysql_error()；mysql_query("set names'gb2312'")；$str="SELECT*FROMfitment_sortwhere supid='0'ORDER BYidASC"；$result=mysql_query($str)or die("Invalid query：".mysql_error()；if($result)while($arr=mysql_fetch_array($result)echo EOD option value=$arr"id"$arr"name"/option EOD；mysql_close($conn)；?/select/label label select name="sel2"id="sel2"onChange="showMenu2(this.value)"option二级分类/option/select/label label select name="sel3"id="sel3"option三级分类/option/select/label/form input type=button value="send value"onClick="alert(document.getElementById('sel').optionsdocument.getElementById('sel').selectedIndex.text+'-'+document.getElementById('sel2').optionsdocument.getElementById('sel2').selectedIndex.text+'-'+document.getElementById('sel3').optionsdocument.getElementById('sel3').selectedIndex.text)"/body/html aa.js！-var xmlHttp var xmlHttp2/函数showMenu(str)-功能函数1 function showMenu(str)xmlHttp=GetXmlHttpObject()/调用GetXmlHttpObject()函数，创建XMLHttpRequest对象if(xmlHttp=null)/如果创建失败，则alert("Browser does not support HTTP Request")returnvar url="get2.php"/定义url,其主要读取数据库url=url+"?q="+str url=url+"&sid="+Math.random()/Math对象的random方法，取随机数xmlHttp.onreadystatechange=stateChanged/设置当XMLHttpRequest对象xmlHttp状态改变时调用的函数,注意函数名后不要添加小括号xmlHttp.open("GET",url,true)/使用XMLHttpRequest对象的open()方法,创建HTTP请求xmlHttp.send(null)/使用XMLHttpRequest对象的open()方法,发送HTTP请求/函数showMenu(str)-功能函数1 function showMenu2(str)xmlHttp2=GetXmlHttpObject()/调用GetXmlHttpObject()函数，创建XMLHttpRequest对象if(xmlHttp2=null)/如果创建失败，则alert("Browser does not support HTTP Request")returnvar url="get2.php"/定义url,其主要读取数据库url=url+"?q2="+str url=url+"&sid="+Math.random()/Math对象的random方法，取随机数xmlHttp2.onreadystatechange=stateChanged2/设置当XMLHttpRequest对象xmlHttp状态改变时调用的函数,注意函数名后不要添加小括号xmlHttp2.open("GET",url,true)/使用XMLHttpRequest对象的open()方法,创建HTTP请求xmlHttp2.send(null)/使用XMLHttpRequest对象的open()方法,发送HTTP请求/函数BuildSel(),根据返回的的字串,重新构建新的下拉菜单控件Select-功能函数2 function BuildSel(str,sel)/先清空原来的数据.sel.options.length=0；/定义一个数组对象var arrstr=new Array()；/以","号拆分传入的字串，并存入数组arrstr=str.split(",")；if(str.length 0)/循环for(var i=0；i arrstr.length；i+)var subarrstr=new Array()；/以"|"拆分subarrstr=arrstri.split("|")；sel.options.add(new Option(subarrstr1,subarrstr0)；sel.options0.selected=true；/函数stateChanged()-响应HTTP请求状态变化function stateChanged()/判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成(注意：异步调用完成不代表异步调用成功)if(xmlHttp.readyState=4|xmlHttp.readyState="complete")/如果异步调用成功-XMLHttpRequest对象的status属性值为200,html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlHttp.status=0 if(xmlHttp.status=200|xmlHttp.status=0)/调用文档对象模型DOM的getElementById()方法查找html文件中的标签txtHint,/innerHTML为IE浏览器中的属性,可以用来更改标签间文本的内容,/xmlHttp.responseText,通过XMLHttpRequest的responseText属性来获取数据responseText,结果为字符串；responseXML,结果为XML形式/document.getElementById("txtHint").innerHTML=xmlHttp.responseText BuildSel(xmlHttp.responseText,document.getElementsByTagName("*").sel2)showMenu2(document.getElementsByTagName("*").sel2.value)；/函数stateChanged()-响应HTTP请求状态变化function stateChanged2()/判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成(注意：异步调用完成不代表异步调用成功)if(xmlHttp2.readyState=4|xmlHttp2.readyState="complete")/如果异步调用成功-XMLHttpRequest对象的status属性值为200,html文件在本地运行,则xmlHttp.status的返回值为0,故应该加上xmlHttp.status=0 if(xmlHttp2.status=200|xmlHttp2.status=0)/调用文档对象模型DOM的getElementById()方法查找html文件中的标签txtHint,/innerHTML为IE浏览器中的属性,可以用来更改标签间文本的内容,/xmlHttp.responseText,通过XMLHttpRequest的responseText属性来获取数据responseText,结果为字符串；responseXML,结果为XML形式/document.getElementById("txtHint").innerHTML=xmlHttp.responseText BuildSel(xmlHttp2.responseText,document.getElementsByTagName("*").sel3)/函数GetXmlHttpObject()-创建XMLHttpRequest对象,即创建一个异步调用对象function GetXmlHttpObject()var xmlHttp=null；try/Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest()；catch(e)/Internet Explorer tryxmlHttp=new ActiveXObject("Msxml2.XMLHTTP")；catch(e)xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")；return xmlHttp；-get2.php?php/指定编码header('Content-Type：text/html；charset=GB2312')；/连接、选择数据库,设置字符集$conn=mysql_connect('localhost','root','')or die('Could not connect：'.mysql_error()；mysql_select_db('fitment',$conn)or die('Can't use database：'.mysql_error()；mysql_query("set names'gb2312'")；/如果传递过来q if($_GET"q")$strs="SELECT*FROM fitment_sort WHERE supid='".$_GET"q"."'"；/echo$str；$results=mysql_query($strs)or die("Invalid query：".mysql_error()；if($results)while($arrs=mysql_fetch_array($results)$strings.=$arrs"id"."|".$arrs"name".","；echo substr($strings,0,strlen($strings)-1)；/如果传递过来q2 if($_GET"q2")$str="SELECT*FROM fitment_sort WHERE supid='".$_GET"q2"."'"；/echo$str；$result=mysql_query($str)or die("Invalid query：".mysql_error()；if($result)while($arr=mysql_fetch_array($result)$string.=$arr"id"."|".$arr"name".","；/去掉字串最后一个字符","echo substr($string,0,strlen($string)-1)；mysql_close($conn)；?记录激动时刻，赢取超级大奖！点击链接，和我一起参加"2010：我的世界杯Blog日志"活动！
