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

今天做了一个简单的ajax省市联动下拉菜单,主要是用来注册会员用的.在网上学习了一些。所用到的省市数据在上一篇日志(http://www.viatop.cn/blog/show-123-1.htm)里面已经发布了,把数据做好之后。

一、注册页面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";
  4.  
  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下能够正常显示。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

😉😐😡😈🙂😯🙁🙄😛😳😮:mrgreen:😆💡😀👿😥😎😕