首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → PHP+AJAX2级联动下拉列表（简单好用）

PHP+AJAX2级联动下拉列表（简单好用）

时间：2006-12-05

来源：互联网

由于大4了，接下来要忙找工作和学校一些繁琐的事情，接下来的1，2个月可能没有时间写原创作品，今晚再弄一个，希望大家喜欢，别忘了支持我哦！^_^。这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：
复制内容到剪贴板
代码:
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;
  }
这个程序的核心就是动态添加
复制内容到剪贴板
代码:
<option>......</option>
服务器端是进行数据的检索，很简单：
复制内容到剪贴板
代码:
<?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：
复制内容到剪贴板
代码:
  <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>
今晚好像精神不好，代码调试了很久，晕死，最后老规矩，截图，源码下载,喜欢就顶吧～～～

[ 本帖最后由 leehui1983 于 2006-12-4 21:18 编辑 ]
2.jpg (3.25 KB)

2006-12-4 21:11

正在获取数据

3.jpg (5.92 KB)

2006-12-4 21:11

获取列表内容

4.jpg (5.62 KB)

2006-12-4 21:11

获取列表内容

ajaxdemo.rar (1.66 KB)

2006-12-4 21:11, 下载次数: 2403

源码下载

作者: leehui1983   发布时间: 2006-12-04

楼主去哪找工作? 来北京么:)

作者: Phzzy   发布时间: 2006-12-04

我也大四..呵呵..HOHO

作者: Phzzy   发布时间: 2006-12-04

北京，hoho，离我太远了，没法去啊

作者: leehui1983   发布时间: 2006-12-04

看不懂,5555555555555

作者: geniuscynic   发布时间: 2006-12-04

不会吧，这个很好懂的

作者: leehui1983   发布时间: 2006-12-04

作者: cator   发布时间: 2006-12-05

AJAX框架部分不太懂，看来得好好学习了！

作者: Nickboy   发布时间: 2006-12-05

我以为你开始挖墙角了呢

作者: 水镜   发布时间: 2006-12-05

作者: fengyun   发布时间: 2006-12-05

有报错，

作者: gelin_ye   发布时间: 2006-12-29

我机子上调试是好的

作者: leehui1983   发布时间: 2006-12-29

不知道是什么缘故?
改了一个下午郁闷！

测试页请见：
http://www.cgsir.com/ajaxdemo/

作者: leeriver   发布时间: 2007-01-03

还真是啊，当时在FF下调试的，没用IE调试过，我的错，哪天改进下

作者: leehui1983   发布时间: 2007-01-03

我也测试了一下，ie不行但是firefox2.0可以

作者: tweak82   发布时间: 2007-01-04

:D :D

作者: isno   发布时间: 2007-01-04

为什么我用上面的只在第一个菜单出现内容，第二菜单不出现内容

作者: jingangel   发布时间: 2007-01-30

我怎么下不下来啊!!

作者: aqwbjg   发布时间: 2007-02-01

作者: 特蓝克斯   发布时间: 2007-02-01

辉老大,这个例子只能在FireFox上面运行,IE里面select2下拉框无法显示内容.将document.getElementById("class2").innerHTML=ajax.responseText改为    document.form1.select2.add(new Option(ajax.responseText,''))后IE可以显示select2下拉框内容,但是FireFox又无法显示了!有没有2个都生效的办法啊?responseText是已经返回有内容了的.

作者: 77578790   发布时间: 2007-02-04

不错 支持下

作者: 天之魔神   发布时间: 2007-02-04

请问这个不能用啊 在第二个SELECT里显示不出内容啊

作者: dangki   发布时间: 2007-02-07

IE 下有个BUG 他先认 name 而不是 id 呵呵..

作者: szy_session1987   发布时间: 2007-02-07

看来把 name属性去掉，只保留id属性不就可以了

作者: leehui1983   发布时间: 2007-02-07

:( 慢慢研究,不太懂

作者: hui07   发布时间: 2007-02-08

作者: wayne_wong   发布时间: 2007-04-09

:L 版主怎么不能用啊!!!!!
我是初学者有些东西不会,请多多指教

作者: liuguoqing   发布时间: 2007-04-09

:D :D :D :D :D

作者: goshawk   发布时间: 2007-04-15

来北海拉
某错呀

作者: 逆雪寒   发布时间: 2007-04-17

:victory:

作者: wukeyuan   发布时间: 2007-04-18

引用:
原帖由 leehui1983 于 2007-2-7 20:54 发表
看来把 name属性去掉，只保留id属性不就可以了
还是不太明白，看看是这样么？

<select name="" 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="" id="class2" style="width:100;">

  function getclass(object){
   var pid=document.form1.value;
   document.getElementById(object).innerHTML="<option>loading...</option>";
   send_request('doclass.php?pid='+pid);
   reobj=object;
  }

作者: dayu   发布时间: 2007-06-12

楼主要有始有终啊，调了办天也没调出来,在IE下有问题啊:(

作者: sumbo   发布时间: 2007-06-20

不错 下载学习一下!

作者: gmlee1999   发布时间: 2007-06-20

没有用拉....死活不会出现第二个Select

作者: viphsj   发布时间: 2007-06-30

欲哭无泪啊，都加油哦！


:o

作者: yiqieqie   发布时间: 2007-07-31

:lol :lol  看了版主几个ajax实例后，发觉版主PHP处理80%，js处理20%。

作者: wayne_wong   发布时间: 2007-08-06

辉老大的代码里没有这句"document.getElementById("class2").innerHTML=ajax.responseText"代码呀,是这句"document.getElementById(reobj).innerHTML=http_request.responseText"吧,像我这种菜鸟看了很误时的,IE测试还是不行.

作者: chyoqin   发布时间: 2007-08-23

实际上LZ的AJAX还没有深入的，真正的返回请求最好是responseXML形式而不是全部element.innerHTML=xml.responseText,然后用DOM对象去解析XML文件，innerHTML不是万能的各种浏览器有自己的解析问题。

作者: jayliu   发布时间: 2007-09-21

在ie下为什么不行郁闷了

作者: reiko   发布时间: 2007-09-28

我才大一，顶！！！！

作者: wsh   发布时间: 2007-09-30

document.getElementById(obj).innerHTML="<option>loading...</option>";
中的obj在页面里根本就没有，代码能正常你运行过去吗？

作者: true_mariner   发布时间: 2007-10-10

document.getElementById(obj).innerHTML="<option>loading...</option>";
中的obj在页面里根本就没有，代码能正常你运行过去吗？

作者: true_mariner   发布时间: 2007-10-10

本帖没有结论,让我失望极了,辉老大

作者: linuxroot   发布时间: 2007-10-11

引用:
原帖由 jayliu 于 2007-9-21 00:44 发表
实际上LZ的AJAX还没有深入的，真正的返回请求最好是responseXML形式而不是全部element.innerHTML=xml.responseText,然后用DOM对象去解析XML文件，innerHTML不是万能的各种浏览器有自己的解析问题。

作者: jlsd   发布时间: 2007-10-17

楼主继续呀，

作者: zhiyuanhai   发布时间: 2007-10-23

好东东

作者: fly1983   发布时间: 2007-10-31

:victory:

作者: byqy   发布时间: 2007-10-31

好东西,一起 分享!

作者: collegboy   发布时间: 2007-11-01

顶上去～～～
不知道这个在IE下的问题怎么可以解决掉～～

作者: yufenglx   发布时间: 2007-11-22

我顶。。辉老大快出来呀。
IE下不好用。哪位能解决一下。。。

作者: shher   发布时间: 2008-04-25

下载研究一下

作者: ylhou   发布时间: 2008-04-26

学习了

作者: ginux   发布时间: 2008-07-26

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net