返回列表 回复 发帖

[原创] PHP+AJAX2级联动下拉列表(简单好用)

[原创] PHP+AJAX2级联动下拉列表(简单好用)

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

[ 本帖最后由 leehui1983 于 2006-12-4 21:18 编辑 ]
附件: 您所在的用户组无法下载或查看附件
每当我在考场上狂砍六七十分,你一定以为那是我一个人干的,但考试从来都不是一个人的事。”离考试结束只有十秒了,但麦迪还需要一个三分!于是他向科比发出信号,只剩五秒了!监考老师也在死死地盯防科比,但天才就是天才,科比还是以一个不可思议的角度将答案传了出去!麦迪接答案!只剩三秒了!整个考场都在试图阻止麦迪,老师抓住了他的右手,但他还是抄了起来!天哪!他用的是左手!整个考场沸腾了!监考老师已经感动地要哭了,但麦迪却先哭了起来,只见他将纸条狠狠地砸向讲台,然后起身黯然离场。原来上面写的是:“我也不会~~”
楼主去哪找工作? 来北京么:)
九阴真经,请同学们多加练习
360行,行行出Bug。
我也大四..呵呵..HOHO
九阴真经,请同学们多加练习
360行,行行出Bug。
北京,hoho,离我太远了,没法去啊
每当我在考场上狂砍六七十分,你一定以为那是我一个人干的,但考试从来都不是一个人的事。”离考试结束只有十秒了,但麦迪还需要一个三分!于是他向科比发出信号,只剩五秒了!监考老师也在死死地盯防科比,但天才就是天才,科比还是以一个不可思议的角度将答案传了出去!麦迪接答案!只剩三秒了!整个考场都在试图阻止麦迪,老师抓住了他的右手,但他还是抄了起来!天哪!他用的是左手!整个考场沸腾了!监考老师已经感动地要哭了,但麦迪却先哭了起来,只见他将纸条狠狠地砸向讲台,然后起身黯然离场。原来上面写的是:“我也不会~~”
看不懂,5555555555555
不会吧,这个很好懂的
每当我在考场上狂砍六七十分,你一定以为那是我一个人干的,但考试从来都不是一个人的事。”离考试结束只有十秒了,但麦迪还需要一个三分!于是他向科比发出信号,只剩五秒了!监考老师也在死死地盯防科比,但天才就是天才,科比还是以一个不可思议的角度将答案传了出去!麦迪接答案!只剩三秒了!整个考场都在试图阻止麦迪,老师抓住了他的右手,但他还是抄了起来!天哪!他用的是左手!整个考场沸腾了!监考老师已经感动地要哭了,但麦迪却先哭了起来,只见他将纸条狠狠地砸向讲台,然后起身黯然离场。原来上面写的是:“我也不会~~”


流浪的生活 不懈的追求
AJAX框架部分不太懂,看来得好好学习了!

回复 #2 Phzzy 的帖子

我以为你开始挖墙角了呢
返回列表