下拉选择可自动更改第二个下拉选择 - Drop down select to change a second drop down select automatically

我有一个网页，里面有一个表格，有几个区域可以输入文本，两个下拉选择选项国家是第一个，根据选择的国家，第二个应该显示该国家的庄园供选择。我的页面连接到我的数据库，从那里可以获得国家和庄园。。。。我有一张国名表，每个国家的庄园都有一张表。所以我所要做的就是让它自动改变州，从中进行选择，这取决于哪个国家被选中了，而不是汇总表格，因为这会在我的数据库中的另一个表中输入一个新条目。我看到使用javascript是一种可行的方法，但在我的情况下无法使其发挥作用，因为我不想被发送到另一个页面或登顶表单。这是我的代码的一部分，任何帮助都将不胜感激。感谢

 $paissql = "SELECT * FROM Paises_table";
 $paisresult = mysql_query($paissql);
 ?>
 <script language="text/javascript">
 function showMe(str)
 {
 <? $estadosql = "SELECT * FROM ".str."_table";
 $estadoresult = mysql_query($estadosql); ?>
 }
 </script>

 <TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" ALIGN="CENTER"> 
 <form action="<?php echo $_SERVER['PHP_SELF']?>"  method=POST>
 <TR><th> id </th> <td><?php echo $row_to_edit['id']?></td>
 </TR>
 <TR><th>Nombre:</th><td><input type="TEXT" name=Nombre value="<?php echo      $row_to_edit['Id_Nombre']?>" 
 SIZE="100"></td></TR>        
 </td></TR>
 <TR><th>Pais:</th><td>
 <select name=Pais onchange="showMe(this.value);" > 
 <?
 while($rowp = mysql_fetch_array($paisresult)) {
 $pais = $rowp['Name'];
 ?>
 <option value=<?php echo $pais; ?>
   <?php if($row_to_edit['Pais']==$pais)
 { echo ' selected="true"';} ?>
 ><?php echo $pais; ?>
 </option>
 <?
 }
 ?>
 </select></td></TR>
 <TR><th>Estado:</th><td>
 <select name=Estado >  
 <?
 while($rowe = mysql_fetch_array($estadoresult)) {
 $estado = $rowe['Estado'];
 ?>
 <option value=<?php echo $estado; ?> <?php if($row_to_edit['Estado']==$estado)
 { echo ' selected="true"';} ?>
 ><?php echo $estado; ?></option>
 <?
 }
 ?>
 <TR><th>Ciudad:</th><td><input type="TEXT"  name=Ciudad  value="<?php echo   $row_to_edit['Ciudad']?>" 
 SIZE="100"></td></TR>
 <TR><th>Website:</th><td><input type="TEXT"  name=website  value="<?php echo  $row_to_edit['website']?>" 
 SIZE="100"></td></TR>
 <TR><td> </td>
 <td>
  <input type="HIDDEN"  name="id"  value="<?php echo $edit_id?>">
  Para agregar preciona aqui:
  <input type="SUBMIT"  name="ACTION"  value="AGREGAR">
 </td>
 </TR>
</form>
</TABLE>    
 <BR>
 <BR>

我希望您知道，使用普通PHP进行开发是90年代的事情。我希望你知道，使用mysql_*就像为黑客敞开大门

您需要的东西被称为AJAX和事件绑定。基本上，您观察第一个下拉列表，当其状态发生变化（即用户选择一个国家）时，向服务器发出异步请求，检索该特定国家的地区列表并重建第二个下拉列表。如果你不需要支持大量的国家/地区，那么在每次请求时下载整个数据库可能是一个很好的折衷方案：这样你的用户就不必等待ajax调用（会有一个小但明显的延迟），但你会浪费带宽。你可以选择。

关于Javascript部分，你可能想使用像jQuery这样的库来观察事件和管理AJAX，也许还有Knockout.js。这里有一个级联下拉列表的教程，即使服务器端的技术是ASP，而不是PHP，但你对js部分感兴趣。

我提出了一个涉及PHP、jQuery for AJAX和Knockout的快速解决方案。你不需要完全采用它，有成千上万种可能的变体。至少，你将有一个了解学习内容的起点。

<?php
$countries = array(
    "US" => array("Minnesota", "California", "Washington DC"),
    "China" => array("安徽", "福建", "江苏"),
    "France" => array("Brittany", "Normandy", "Ilé de France"),
    "UK" => array("Galles", "Scotland", "England")
);
if (isset($_REQUEST['json'])) {
    header("Content-Type: application/json; charset=utf-8");
    echo json_encode($countries[$_REQUEST['country']]);
    die();
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script>
var countries = <?php echo json_encode(array_keys($countries)); ?>;
$(function(){
var Model = function(countries) {
    var self = this;
    self.countries = ko.observableArray(countries);
    self.regions = ko.observableArray([]);
    self.getRegions = function() {
        $.get("?json", {"country": $("#country").val()}, function(regions){
            self.regions(regions);
        });
    }
}
var Countries = new Model(countries);
ko.applyBindings(Countries);
// Initialize the second dropdown after binding
Countries.getRegions();
});
</script>
    <title>Cascade dropdown</title>
</head>
<body>
<form>
<table>
    <tr>
        <td>Country:</td>
        <td>
            <select id="country" name="country" data-bind="options: countries,
                event: {change: getRegions}">
            </select>
        </td>
    <tr>
        <td>Region:</td>
        <td>
            <select name="region" data-bind="options: regions">
            </select>
        </td>
    </tr>
</table>
</form>
</body>
</html>