PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持
2011-02-22 09:42
741 查看
PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持
产品分类搜索和产品发布有二级甚至多级分类时，以及文章二级分类搜索和后台发布时候，都能用到二级分类无刷新下拉菜单选择。今天我们就用ajax和php从数据库中读取二级分类实现二级联动下拉选择菜单。刚开始在网上找了一段代码，后来测试发现代码在FF（Firefox）下测试成功，但在IE下不成功（IE6.7.8均测试不成功），我们先看看这段代码：
ajax框架：<title>ajax2级联动菜单演示</title>
<script language="JavaScript">
<!--
var http_request = false;
if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
function send_request(url){
if(!http_request){
window.alert("创建XMLHttp对象失败！");
return false;
}
http_request.open("GET",url,true);
http_request.onreadystatechange=processrequest;
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;
}
//-->
</script>
</head>
HTML显示页面：
<?php include("conn/conn.php");?>
<form name="form1">
<select name="select1" id="class1" style="width:200;" onChange="getclass(’class2’);">
<option selected="selected">请选择大类</option>
<?php
$sql="select* from tb_type where parentid=0";
$result=mysql_query($sql);
//循环列出选项
while($rows=mysql_fetch_array($result)){
?>
<option value=<?php echo $rows[’id’]; ?>><?php echo $rows[’typename’];?></option>
<?php } ?>
</select>
<select name="select2" style="width:300;">
</select>
</form>
PHP后台doclass.php：
<?php
include("conn/conn.php");.
$pid=$_GET[’pid’];
$sql="select * from tb_type where parentid=".$pid."";
$result=mysql_query($sql);
//循环列出选项
while($rows=mysql_fetch_array($result)){
$typename = gbkToUtf8($rows[’typename’]);
echo "<option value=".$rows[’id’].">".$typename."</option>";
} ?>
以上代码，经过多次测试都不成功，最后修改以下几处IE测试通过：
1. reobj必须定义为全局变量 var reobj;
2. 赋值reobj=obj; 放到send_request()上面；
3. ie里不能用innerHTML更新select, IE浏览器下select元素不支持innerHTML，返回ajax可以连 <select>标签一起返回，即在外面再套一个div，或者用outerHTML更新 document.getElementById(reobj).outerHTML=http_request.responseText;，但是Firefox又不支持outerHTML。因此采用外套div的方法较好。
最后代码修改如下，IE和Firefox测试均通过：
<title>ajax2级联动菜单演示</title>
<script language="JavaScript">
<!--
var reobj = null;
var http_request = false;
if(window.XMLHttpRequest){
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
function send_request(url){
if(!http_request){
window.alert("创建XMLHttp对象失败！");
return false;
}
http_request.open("GET",url,true);
http_request.onreadystatechange=processrequest;
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>";
reobj=obj;
send_request("doclass.php?pid="+pid);
}
//-->
</script>
</head>
<body>
<?php include("conn/conn.php");?>
<form name="form1">
<select name="select1" id="class1" style="width:200;" onChange="getclass(’class2’);">
<option selected="selected">请选择大类</option>
<?php
$sql="select* from tb_type where parentid=0";
$result=mysql_query($sql);
//循环列出选项
while($rows=mysql_fetch_array($result)){
?>
<option value=<?php echo $rows[’id’]; ?>><?php echo $rows[’typename’];?></option>
<?php } ?>
</select>
<div id="class2">
</div>
</form>
</body>
doclass.php: <?php
include("conn/conn.php");
function gbkToUtf8 ($value) {
return iconv("gbk","UTF-8", $value);
}
//ajax采用utf编码，从数据库获得的中文字符为gbk编码，iconv函数将从数据库取得的中文字符先编码为utf-8,
//再交给ajax处理echo输出，解决显示ajax乱码问题.
$pid=$_GET[’pid’];
$sql="select * from tb_type where parentid=".$pid."";
$result=mysql_query($sql);
?>
<select name="select2" style="width:300;">
<?php
//循环列出选项
while($rows=mysql_fetch_array($result)){
$typename = gbkToUtf8($rows[’typename’]);
echo "<option value=".$rows[’id’].">".$typename."</option>";
} ?>
</select>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板
- 用ajax技术读取数据库内容实现二级联动下拉选择菜单
- 基于javascript实现全国省市二级联动下拉选择菜单
- [js]实现简单的省市二级联动下拉选择菜单
- JavaScript实现二级、多级(N级)联动下拉列表框更新版，支持IE6，FireFox，函数和类两种调用方式，支持到N级，非常通用。
- JavaScript实现二级、多级(N级)联动下拉列表框更新版，支持IE6，FireFox，函数和类两种调用方式，支持到N级，非常通用
- 一个无刷新二级联动下拉列表,同样适用与firefox,这算ajax么?
- 基于javascript实现全国省市二级联动下拉选择菜单
- js实现的全国省市二级联动下拉选择菜单完整实例
- 用php和ajax写一个省市区的三级联动，实现地区的下拉选择
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- JavaScript实现二级、多级(N级)联动下拉列表框更新版，支持IE6，FireFox，函数和类两种调用方式，支持到N级，非常通用。
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- JavaScript实现二级、多级(N级)联动下拉列表框更新版，支持IE6，FireFox，函数和类两种调用方式，支持到N级，非常通用。
- js实现的全国省市二级联动下拉选择菜单完整实例
- php ajax实现的二级（多级）联动菜单(2008-10-21,11:36:08)
- 一个无刷新二级联动下拉列表,同样适用与firefox,这算ajax么?