设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 640|回复: 0

[经验分享] PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持

[复制链接]
archer05

尚未签到
发表于 2017-4-11 08:50:13 | 显示全部楼层 |阅读模式
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

還沒測試...

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-363168-1-1.html 上篇帖子： PHP之中使用共享内存进行高速数据更新的一种方案 [转] 下篇帖子： What’s new in PHP 5.4? A huge list of major changes!
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表