3使用ajax和php下拉

时间:2013-11-16 11:46:47

标签: php ajax

国家,州和地区有3个下拉列表。当我从国家/地区下拉菜单中选择一个国家/地区时,我正在这样做,然后状态下拉列表仅显示在该国家/地区附近,当我选择州时,区域下拉列表仅显示相邻区域的州下拉。

我的home.php代码是

<?php
include "config.php";
?>
<html> 
<head> 
<script type="text/javascript">
        function showstate(str){
            if (str == "") {
                document.getElementById("state").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("state").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "state.php?country=" + str, true);
            xmlhttp.send();
        }
        function showcity(str2){
            if (str2 == "") {
                document.getElementById("city").innerHTML = "";
                return;
            }
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("city").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "district.php?state=" + str2, true);
            xmlhttp.send();
        }
 </script>
</head>
<body> 
<form > 
Choose your country : <select name="country"  onchange="showstate(this.value)"> <option>Select country  </option> 
 <?php

   $query = "SELECT DISTINCT country FROM area";
   $result = mysql_query($query);
   while($row = mysql_fetch_array($result)){
   echo"<option  value =".$row[0]."> ".$row[0]."</option>";
                                }   
 ?>
</select>
State : <select id="state" name="state" onChange="showcity(this.value)"> <option>Select state</option> </select> 
District : <select id="city" name="city"> <option>Select district </option> </select>
</form>
</body>
</html>

和state.php是

<?php
include "config.php";
echo " <option>Select state  </option> " ;
if(isset( $_GET['country']) ) 
{
  $country = $_GET['country'];
}
  $query = "SELECT DISTINCT state FROM area WHERE country = '".$country."' "; 
  $result = mysql_query($query);
    while ($row = mysql_fetch_assoc($result)) 
    {
           echo"<option  value =".$row['state']."> ".$row['state']."</option>";
    }
?>

而且district.php是

<?php
include "config.php";
echo " <option>Select district  </option> " ;
if(isset( $_GET['state']) ) 
{
  $state = $_GET['state'];
}
   $query = "SELECT DISTINCT district FROM area WHERE state = '".$state."' "; 
   $result = mysql_query($query);
   while ($row = mysql_fetch_assoc($result)) 
   {

      echo"<option  value =".$row['district']."> ".$row['district']."</option>";

   }
 ?>

一切都好。但问题是当我选择任何一个区域时使用所有三个下拉列表,如果再次在同一页面中我将从国家/地区下拉列表中重新选择国家/地区,则区域不会保持更改。

1 个答案:

答案 0 :(得分:0)

在更改国家/地区之前,在调用你的ajax调用加载状态之前,第1个区域组合为空。