既然选择了远方，便只顾风雨兼程~~~
PHP+AJAX2级联动下拉列表（简单好用）
查看( 31199 ) /
评论( 51 )
由于大4了，接下来要忙找工作和学校一些繁琐的事情，接下来的1，2个月可能没有时间写原创作品，今晚再弄一个，希望大家喜欢，别忘了支持我哦！^_^。这次给大家展示的是非常常用的一个ajax功能－－联动下拉列表，本程序采用2级联动，根据数据库的内容用ajax处理下拉列表内容，实现根据用户需求取得下拉选项，交互性强，更新容易。废话少说，不如正题，这次依然象往常一样提供截图和源码下载，首先还是AJAX框架：
[本帖最后由 leehui1983 于 2006-12-4 21:18 编辑]
1.jpg
2.jpg
3.jpg
4.jpg
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;
}这个程序的核心就是动态添加CODE:
<option>......</option>服务器端是进行数据的检索，很简单：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:
<scrīpt language="javascrīpt" src="ajaxmenu.js"></scrīpt>
<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;" ōnChange="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 编辑]
1.jpg
2.jpg
3.jpg
4.jpg
ajaxdemo.rar
(2006-12-04 21:11:15, Size: 1.66 kB, Downloads: 41)
TAG:
-
Phzzy 发布于2006-12-04 21:23:45
-
楼主去哪找工作? 来北京么:)
-
-
我也大四..呵呵..HOHO
-
leehui1983 发布于2006-12-04 21:27:40
-
北京，hoho，离我太远了，没法去啊
-
geniuscynic 发布于2006-12-04 21:28:30
-
看不懂,5555555555555
-
-
不会吧，这个很好懂的
-
cator 发布于2006-12-05 00:34:31
-
-
Nickboy 发布于2006-12-05 11:14:00
-
AJAX框架部分不太懂，看来得好好学习了！
-
水镜发布于2006-12-05 15:30:18
-
回复 #2 Phzzy 的帖子
我以为你开始挖墙角了呢
-
fengyun 发布于2006-12-05 21:26:11
-
-
gelin_ye发布于2006-12-29 17:38:51
-
回复 #1 leehui1983 的帖子
有报错，
-
-
我机子上调试是好的
-
leeriver发布于2007-01-03 21:58:59
-
IE6.0看不到效果，firefox浏览器正常
不知道是什么缘故?
改了一个下午郁闷！
测试页请见：
http://www.cgsir.com/ajaxdemo/
-
-
还真是啊，当时在FF下调试的，没用IE调试过，我的错，哪天改进下
-
tweak82发布于2007-01-04 17:33:08
-
我也测试了一下，ie不行但是firefox2.0可以
-
isno 发布于2007-01-04 23:31:26
-
:D :D
-
jingangel 发布于2007-01-30 16:41:10
-
为什么我用上面的只在第一个菜单出现内容，第二菜单不出现内容
-
aqwbjg发布于2007-02-01 16:27:20
-
.....
我怎么下不下来啊!!
-
特蓝克斯 发布于2007-02-01 21:02:28
-
-
77578790 发布于2007-02-04 11:33:57
-
辉老大,这个例子只能在FireFox上面运行,IE里面select2下拉框无法显示内容.将document.getElementById("class2").innerHTML=ajax.responseText改为 document.form1.select2.add(new Option(ajax.responseText,''))后IE可以显示select2下拉框内容,但是FireFox又无法显示了!有没有2个都生效的办法啊?responseText是已经返回有内容了的.
-
天之魔神发布于2007-02-04 13:13:15
-
不错 支持下
