What is Web编程 Readers Blog?

    Web编程 Readers Blog集中了Web资深程序员的技巧和实战经验，涵盖了Web编程的全部范围: 3P(ASP, JSP, PHP) web编程技术，MySQL数据库开发，服务器网络安全和DIV+CSS布局等，提供一些优秀的编程源码，使您的Web编程学习之路更加平坦。

浏览模式: 标准 | 列表

php,ajax简单制作省市联动下拉菜单

Submitted by 作者: admin 2008-06-25 10:54:16

今天做了一个简单的ajax省市联动下拉菜单,主要是用来注册会员用的.在网上学习了一些。

一、注册页面reg.php

XML/HTML代码
  1. <?  
  2. @require_once "../inc/class.db.php";   
  3.   
  4. $db = new DB;   
  5. ?>  
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head>  
  9. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  10. <title>省市联动下拉菜单</title>
  11. <script type="text/javascript" language="JavaScript">
    <!--
    var xmlHttp;
  12. function createXMLHttpRequest() {
        if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
    }
       
    function addSelect(sid,elementID) {
        oElement=document.getElementById(elementID);
         createXMLHttpRequest();
    var url = "select.php?sid=" + sid;
    xmlHttp.onreadystatechange = function(){onStateChange(oElement)};
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    }
  13. function onStateChange(oElement){
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
       var returntxt=unescape(xmlHttp.responseText);
       var htmltxt = '<select name="city" id="city">' + returntxt + '</select>';
        document.getElementById("citybox").innerHTML=htmltxt;
            }
        }
    }
    //-->
    </script>
  14. </head>  
  15. <body>  
  16. <table width="100%" border="0" cellspacing="2" cellpadding="3" class="formtbl">  
  17.     <form name="regtbl" id="regtbl">  
  18.         <tr>  
  19.             <td width="22%"><div align="right">用户名：</div></td>  
  20.             <td width="78%"><input name="username" type="text" id="username" />  
  21.                 <span class="STYLE1">*</span></td>  
  22.         </tr>  
  23.         <tr>  
  24.             <td><div align="right">密码：</div></td>  
  25.             <td><input name="passwd1" type="text" id="passwd1" />  
  26.                 <span class="STYLE1">*</span></td>  
  27.         </tr>  
  28.         <tr>  
  29.             <td><div align="right">密码确认：</div></td>  
  30.             <td><input name="passwd2" type="text" id="passwd2" />  
  31.                 <span class="STYLE1">*</span></td>  
  32.         </tr>  
  33.         <tr>  
  34.             <td> </td>  
  35.             <td> </td>  
  36.         </tr>  
  37.         <tr>  
  38.             <td><div align="right">姓名：</div></td>  
  39.             <td><input name="name" type="text" id="name" />  
  40.                 <span class="STYLE1">*</span></td>  
  41.         </tr>  
  42.         <tr>  
  43.             <td><div align="right">邮箱：</div></td>  
  44.             <td><input name="email" type="text" id="email" />  
  45.                 <span class="STYLE1">*</span></td>  
  46.         </tr>  
  47.         <tr>  
  48.             <td><div align="right">是否接受每周订阅：</div></td>  
  49.             <td><input name="mail" type="radio" value="radiobutton" checked="checked" />  
  50.                  是   
  51.                 <input type="radio" name="mail" value="radiobutton" />  
  52.                  否</td>  
  53.         </tr>  
  54.         <tr>  
  55.             <td><div align="right">所在城市：</div></td>  
  56.             <td><div style="float:left">  
  57.                     <select name="province" size="1" id="province" onchange="addSelect(this.options[this.selectedIndex].value,'city');">  
  58.                         <option value="">选择省份...</option>  
  59.                         <?  
  60.                  $result = $db->query("select * from gt_province");   
  61.                  while($row = $db->fetch_assoc($result)){   
  62.                      echo "<option value=\"".$row['proid']."\">".$row['proname']."</option>";   
  63.                  }   
  64.             ?>  
  65.                     </select>  
  66.                 </div>  
  67.                 <div id="citybox" style="float:left; padding-left:5px;"></div></td>  
  68.         </tr>
  69.     </form>  
  70. </table>  
  71. </body>  
  72. </html>  

二、相应页面select.php内容是

PHP代码
  1. <?   
  2. header('Content-Type:text/html;charset=GB2312');
  3. require_once "../inc/class.db.php";
  5. $db = new DB;
  6. $id = $_REQUEST['sid'];   
  7. $query = "select * from gt_city where proid = $id";
  8. $result = $db->query($query);
  9. while($row = $db->fetch_assoc($result)){
  10.     echo "<option value=\"".$row['cityid']."\">".$row['cityname']."</option>";   
  11. }   
  12. ?>

经测试在IE7.0 和 FireFox2.0.0.7下能够正常显示。

分类:网站|AJAX学习 | Read more 阅读 (296) 评论 (0)



<<上一篇 | 下一篇>>



访客 评论





发表评论

昵　称 (必填)

邮　箱 (必填)

网 站

验证码: (必填)

 



日志分类┊Category


热点文章┊Articles


最新文章┊Articles


最新评论┊Comments