http://www.phpchina.com/bbs/thread-13376-1-1.html
PHP+AJAX2级联动下拉列表（简单好用）由于大4了，接下来要忙找工作和学校一些繁琐的事情，接下来的1，2个月可能没有时间写原创作品，今晚再弄一个，希望大家喜欢，别忘了支持我哦！^_^。这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：CODE:
var http_request=false; function send_request(url){//初始化，指定处理函数，发送请求的函数 http_request=false;//开始初始化XMLHttpRequest对象if(window.XMLHttpRequest){//Mozilla浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMimeType){//设置MIME类别 http_request.overrideMimeType("text/xml"); }}else if(window.ActiveXObject){//IE浏览器 try{ http_request=new ActiveXObject("Msxml2.XMLHttp"); }catch(e){ try{ http_request=new ActiveXobject("Microsoft.XMLHttp"); }catch(e){} } }if(!http_request){//异常，创建对象实例失败 window.alert("创建XMLHttp对象失败！"); return false;}http_request.onreadystatechange=processrequest;//确定发送请求方式，URL，及是否同步执行下段代码 http_request.open("GET",url,true);http_request.send(null); } //处理返回信息的函数 function processrequest(){ if(http_request.readyState==4){//判断对象状态 if(http_request.status==200){//信息已成功返回，开始处理信息 document.getElementById(reobj).innerHTML=http_request.responseText; } else{//页面不正常 alert("您所请求的页面不正常！"); } } } function getclass(obj){ var pid=document.form1.select1.value; document.getElementById(obj).innerHTML="<option>loading...</option>"; send_request('doclass.php?pid='+pid); reobj=obj; }
这个程序的核心就是动态添加 [Copy to clipboard] CODE: <option>......</option> 服务器端是进行数据的检索，很简单： [Copy to clipboard] CODE: <?php header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 $pid=$_GET['pid']; $db=mysql_connect("localhost","root","7529639"); //创建数据库连接 mysql_query("set names 'GBK'"); mysql_select_db("menuclass"); $sql="select classname from menu where parentid=".$pid.""; $result=mysql_query($sql); //循环列出选项 while($rows=mysql_fetch_array($result)){ echo '<option>'; echo $rows['classname']; echo "</option>/n"; } ?> 再看看列表页面的html： CODE: <script language="javascript" src="ajaxmenu.js"></script> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>ajax2级联动菜单演示</title> </head> <body> <form name="form1"> <select name="select1" id="class1" style="width:100;" onChange="getclass('class2');"> <option selected="selected"></option> <option value="1">大类1</option> <option value="2">大类2</option> </select> <select name="select2"id="class2" style="width:100;"> </select> </form> </body> </html>