PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持 -

junesnow17

浏览: 3869 次
性别:
来自: 龍泉

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (4)

社区版块

存档分类

2011-04 ( 4)
更多存档...

PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持

浏览器 IE PHP Firefox Ajax

PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持

产品分类搜索和产品发布有二级甚至多级分类时，以及文章二级分类搜索和后台发布时候，都能用到二级分类无刷新下拉菜单选择。今天我们就用ajax和php从数据库中读取二级分类实现二级联动下拉选择菜单。

刚开始在网上找了一段代码，后来测试发现代码在FF（Firefox）下测试成功，但在IE下不成功（IE6.7.8均测试不成功），我们先看看这段代码：

ajax框架：<title>ajax2级联动菜单演示</title>
<script language="JavaScript">

</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">

</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>

轉自 http://www.bokee.net/bloggermodule/blog_viewblog.do?id=4194076

還沒測試...

分享到：