查看: 18519|回复: 3

PHP+AJAX2级联动下拉列表(简单好用)

[复制链接]
发表于 2007-9-24 10:04:52 | 显示全部楼层 |阅读模式
台州网址导航
这次给大家展示的是非常常用的一个ajax功能--联动下拉列表,本程序采用2级联动,根据数据库的内容用ajax处理下拉列表内容,实现根据用户需求取得下拉选项,交互性强,更新容易。废话少说,不如正题,这次依然象往常一样提供截图和源码下载,首先还是AJAX框架:

var http_request=false;
  function send_request(url){//初始化,指定处理函数,发送请求的函数
    http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){//设置MIME类别
    http_request.overrideMimeType("text/xml");
  }
}
else if(window.ActiveXObject){//IE浏览器
  try{
   http_request=new ActiveXObject("Msxml2.XMLHttp");
  }catch(e){
   try{
   http_request=new ActiveXobject("Microsoft.XMLHttp");
   }catch(e){}
  }
    }
if(!http_request){//异常,创建对象实例失败
  window.alert("创建XMLHttp对象失败!");
  return false;
}
http_request.onreadystatechange=processrequest;
//确定发送请求方式,URL,及是否同步执行下段代码
    http_request.open("GET",url,true);
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;
  }

这个程序的核心就是动态添加

<option>......</option>

服务器端是进行数据的检索,很简单:

<?php
  header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码
  $pid=$_GET['pid'];
  $db=mysql_connect("localhost","root","7529639"); //创建数据库连接
  mysql_query("set names 'GBK'");
  mysql_select_db("menuclass");
  $sql="select classname from menu where parentid=".$pid."";
  $result=mysql_query($sql);
  
  //循环列出选项
  while($rows=mysql_fetch_array($result)){
   echo '<option>';
      echo $rows['classname'];
   echo "</option>\n";
  }
?>

再看看列表页面的html:


  <script language="javascript" src="ajaxmenu.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax2级联动菜单演示</title>
</head>
<body>
<form name="form1">
<select name="select1" id="class1" style="width:100;" onChange="getclass('class2');">
  <option selected="selected"></option>
  <option value="1">大类1</option>
  <option value="2">大类2</option>
</select>
<select name="select2"id="class2" style="width:100;">
</select>
</form>
</body>
</html>

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
 楼主| 发表于 2007-9-24 10:05:56 | 显示全部楼层
台州网址导航
doclass.php

<?php

  header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码
  $pid=$_GET['pid'];

  $db=mysql_connect("localhost","root","7529639"); //创建数据库连接
  mysql_query("set names 'GBK'");
  mysql_select_db("menuclass");
  $sql="select classname from menu where parentid=".$pid."";
  $result=mysql_query($sql);
  
  //循环列出选项
  while($rows=mysql_fetch_array($result)){
          echo '<option>';
      echo $rows['classname'];
          echo "</option>\n";
  }

?>
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
 楼主| 发表于 2007-9-24 10:06:10 | 显示全部楼层
台州网址导航
ajaxmenu.js

var http_request=false;
  function send_request(url){//初始化,指定处理函数,发送请求的函数
    http_request=false;
        //开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest){//Mozilla浏览器
         http_request=new XMLHttpRequest();
         if(http_request.overrideMimeType){//设置MIME类别
           http_request.overrideMimeType("text/xml");
         }
        }
        else if(window.ActiveXObject){//IE浏览器
         try{
          http_request=new ActiveXObject("Msxml2.XMLHttp");
         }catch(e){
          try{
          http_request=new ActiveXobject("Microsoft.XMLHttp");
          }catch(e){}
         }
    }
        if(!http_request){//异常,创建对象实例失败
         window.alert("创建XMLHttp对象失败!");
         return false;
        }
        http_request.onreadystatechange=processrequest;
        //确定发送请求方式,URL,及是否同步执行下段代码
    http_request.open("GET",url,true);
        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;
  }
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
 楼主| 发表于 2007-9-24 10:06:20 | 显示全部楼层
台州网址导航
index.html

<script language="javascript" src="ajaxmenu.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax2级联动菜单演示</title>
</head>

<body>
<form name="form1">
<select name="select1" id="class1" style="width:100;" onChange="getclass('class2');">
  <option selected="selected"></option>
  <option value="1">大类1</option>
  <option value="2">大类2</option>
</select>
<select name="select2"id="class2" style="width:100;">
</select>
</form>
</body>
</html>
台州维博网络(www.tzweb.com)专门运用PHP+MYSQL/ASP.NET+MSSQL技术开发网站门户平台系统等。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

网站推广
关于我们
  • 台州维博网络(Tzweb.com)拥有多年开发网站平台系统门户手机客户端等业务的成功经验。主要从事:企业网站建设、网站程序开发、手机APP客户端、平面设计、主机域名、虚拟空间、网站推广、网站优化、后期维护等服务,满足不同企业公司的需求,是台州地区领先的网络技术服务商!

Hi,扫描关注我

Copyright © 2005-2024 站长论坛 All rights reserved

Powered by 站长论坛 with TZWEB Update Techonolgy Support

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