PHP+ajax二级联动下拉选择菜单，IE+Firefox浏览器支持
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>