0

I have a webpage where I have a form with several areas to input text and two drop down select options countries is the first one and depending in witch country is chosen the second should display the estates for that country to choose. my page connects to my db from where it gets the countries and estates.... I have a table with the country names and one table for each country estates. so all I'm trying to do is making it change the states to choose from automatically depending witch country got selected with out summiting the form since that enters a new entry to another table in my db. I seen that using javascript is the way to go but can't get it to work in my case since I don't want to be sent to another page or summit the form. here is part of my code any help will be greatly appreciated. Thanks

 $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>
4

1 回答 1

1

我希望您知道使用纯 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>
于 2012-09-15T22:09:42.140 回答