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>
轉自 http://www.bokee.net/bloggermodule/blog_viewblog.do?id=4194076
還沒測試...
产品分类搜索和产品发布有二级甚至多级分类时,以及文章二级分类搜索和后台发布时候,都能用到二级分类无刷新下拉菜单选择。今天我们就用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>
轉自 http://www.bokee.net/bloggermodule/blog_viewblog.do?id=4194076
還沒測試...