版主

Rank: 7 Rank: 7 Rank: 7

宝象座骑

1^#

字体大小: tT

发表于 2006-12-4 21:11 | 只看该作者

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

由于大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 编辑 ]

附件: 您所在的用户组无法下载或查看附件

收藏分享评分

每当我在考场上狂砍六七十分，你一定以为那是我一个人干的，但考试从来都不是一个人的事。”离考试结束只有十秒了，但麦迪还需要一个三分！于是他向科比发出信号，只剩五秒了！监考老师也在死死地盯防科比，但天才就是天才，科比还是以一个不可思议的角度将答案传了出去！麦迪接答案！只剩三秒了！整个考场都在试图阻止麦迪，老师抓住了他的右手，但他还是抄了起来！天哪！他用的是左手！整个考场沸腾了！监考老师已经感动地要哭了，但麦迪却先哭了起来，只见他将纸条狠狠地砸向讲台，然后起身黯然离场。原来上面写的是：“我也不会～～”

回复引用

订阅 TOP

Phzzy

名誉版主

Rank: 8 Rank: 8

第一颗象牙第二颗象牙第三颗象牙第四颗象牙

2^#

发表于 2006-12-4 21:23 | 只看该作者

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

九阴真经,请同学们多加练习
360行，行行出Bug。

回复引用

TOP

Phzzy

名誉版主

Rank: 8 Rank: 8

第一颗象牙第二颗象牙第三颗象牙第四颗象牙

3^#

发表于 2006-12-4 21:25 | 只看该作者

我也大四..呵呵..HOHO

九阴真经,请同学们多加练习
360行，行行出Bug。

回复引用

TOP

leehui1983

版主

Rank: 7 Rank: 7 Rank: 7

宝象座骑

4^#

发表于 2006-12-4 21:27 | 只看该作者

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

每当我在考场上狂砍六七十分，你一定以为那是我一个人干的，但考试从来都不是一个人的事。”离考试结束只有十秒了，但麦迪还需要一个三分！于是他向科比发出信号，只剩五秒了！监考老师也在死死地盯防科比，但天才就是天才，科比还是以一个不可思议的角度将答案传了出去！麦迪接答案！只剩三秒了！整个考场都在试图阻止麦迪，老师抓住了他的右手，但他还是抄了起来！天哪！他用的是左手！整个考场沸腾了！监考老师已经感动地要哭了，但麦迪却先哭了起来，只见他将纸条狠狠地砸向讲台，然后起身黯然离场。原来上面写的是：“我也不会～～”

回复引用

TOP

geniuscynic

大象

Rank: 3 Rank: 3

5^#

发表于 2006-12-4 21:28 | 只看该作者

看不懂,5555555555555

回复引用

TOP

leehui1983

版主

Rank: 7 Rank: 7 Rank: 7

宝象座骑

6^#

发表于 2006-12-4 21:31 | 只看该作者

不会吧，这个很好懂的

每当我在考场上狂砍六七十分，你一定以为那是我一个人干的，但考试从来都不是一个人的事。”离考试结束只有十秒了，但麦迪还需要一个三分！于是他向科比发出信号，只剩五秒了！监考老师也在死死地盯防科比，但天才就是天才，科比还是以一个不可思议的角度将答案传了出去！麦迪接答案！只剩三秒了！整个考场都在试图阻止麦迪，老师抓住了他的右手，但他还是抄了起来！天哪！他用的是左手！整个考场沸腾了！监考老师已经感动地要哭了，但麦迪却先哭了起来，只见他将纸条狠狠地砸向讲台，然后起身黯然离场。原来上面写的是：“我也不会～～”

回复引用

TOP

cator