双下拉菜单- php MySQL Ajax - Double dropdown menu - php MySQL Ajax

我有两个MySQL表:

带有字段:'country_id'和'country'的'country'
'city'字段:'city_id'， 'city'， 'city_link'和'country_id'

我想建立一个html双下拉，用户可以选择一个'国家'，然后一个'城市'基于'国家'。此外，一旦一个"城市"已被选中，我希望有一个onClick事件使用href 'city_link'将用户带到另一个页面。

有两个文件(ajaxcalling.php):

<?
include("/connection.php");
$ID=$_REQUEST['country_id'];
$connect=mysql_connect($hostname_c, $username_c, $password_c);
echo 'Details:<select name="details" width="100">';
$result = mysql_db_query($database, "SELECT * FROM c_city WHERE country_id=".$ID);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
 echo "<option value=".$row['city_id'].">".$row['city']."</option>";
}
echo '</select>';
mysql_close($connect);
?>

(dropdown.php)

和

<script>
function CreateXmlHttpObject() { //function to return the xml http object
    var xmlhttp=false;  
    try{
        xmlhttp=new XMLHttpRequest();//creates a new ajax object
    }
    catch(e)    {       
        try{            
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
//this is for IE browser
        }
        catch(e){
            try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
//this is for IE browser
            }
            catch(e1){
                xmlhttp=false;//error creating object
            }
        }
    }
    return xmlhttp;
}

  function CategoryGrab(strURL)
 {         
 var req = CreateXmlHttpObject(); // function to get xmlhttp object
 if (req)
 {
  req.onreadystatechange = function()
 {
  if (req.readyState == 4) { //data is retrieved from server
   if (req.status == 200) { // which reprents ok status                    
     document.getElementById('details').innerHTML=req.responseText;
//put the results of the requests in or element
  }
  else
  { 
     alert("There was a problem while using XMLHTTP:'n");
  }
  }            
  }        
req.open("GET", strURL, true); //open url using get method
req.send(null);//send the results
 }
}
</script>
<?
include("connection.php");
$connect=mysql_connect($hostname_c, $username_c, $password_c)
  or die ("Mysql connecting error"); 
echo '<table align="center"><tr><td><center><form method="post" action="">Category:
<select name="category"         
onChange="CategoryGrab('."'".'ajaxcalling.phpcountry_id='."'".'+this.value);">';
$result = mysql_db_query($database, "SELECT * FROM c_country");
$nr=0;
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$nr++;
echo "<option value=".'"'.$row['country_id'].'" >'.$row['country']."</option>";
}
echo '</select>'."'n";
echo '<div id="details">Details:<select name="details" width="100" >';
$result = mysql_db_query($database, "SELECT * FROM c_city WHERE country_id=1");
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
 echo "<option value=".$row['city_id'].">".$row['city']."</option>";
}
echo '</select></div>';
echo '</form></td></tr></table>';
mysql_close($connect);
?>

这里有一个链接

我真的很感激你的帮助，因为我已经被困在这个问题上一段时间了

首先你所提供的链接是混乱的，它不显示任何东西。我做了一个视图源，发现了一些东西。

你的脚本标签在标签的外面
你用来链接javascript文件的脚本标签是错误的，你应该关闭脚本标签。像这样的

<script type="text/javascript" src="path to ur file"></script>

这里有几个链接 www.huanix.com/files/dependent_select/dependent_select.php

http://bytes.com/topic/php/answers/708593-dependent-dropdown-list-mysql

http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php

<?PHP
/*
1)  Passing variables to ajax is the same as submitting forms.  You should never trust user input.  You should always validate the data.  You should prevent SQL injection.  
2) Open needs to go before onstatereadychange function
*/
?>
<html>
<head>
<script language="javascript"> 
  function CategoryGrab(strURL)
 {         
 var req = CreateXmlHttpObject(); // function to get xmlhttp object
 if (req)
 {
  req.onreadystatechange = function()
 {
  if (req.readyState == 4) { //data is retrieved from server
   if (req.status == 200) { // which represents ok status                    
     document.getElementById('details').innerHTML=req.responseText;
//put the results of the requests in or element
  }
  else
  { 
     alert("There was a problem while using XMLHTTP:'n");
  }
  }            
  }        
req.open("GET", strURL, true); //open url using get method
req.send(null);//send the results
 }
}
// what I use:
// Pretty sure you're open needs to go before the onreadystatechange function
function makeAjaxGetRequest(url, output, image) {
  if( image == 1 ){
      document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
  }
  if(xmlhttp) { 
    xmlhttp.open("GET",url,true); 
    xmlhttp.onreadystatechange = function(){
       if (xmlhttp.readyState == 4) {
         if(xmlhttp.status == 200) {
           document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
         }
         else {
            alert("Error during AJAX call.");
         }
       }    
    }
    xmlhttp.send(null); //Posting txtname to PHP File
  }
}
</script>