下拉菜单中选择更改第二个下拉自动选择

我有一个网页，我有一个形式几个方面来输入文字和两个下拉菜单中选择国家的选择是第一位的，并根据在女巫的国家选择第二应显示该国家选择的房产。我的页面连接到我的数据库，从那里得到的国家和地区....我有一个国家名称和每个国家的屋顶表。所以我试图做的是让它改变状态来自动选择自动取决于女巫国家选择与峰会形式，因为这进入一个新的条目，我的数据库中的另一个表。我看到使用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>

来源

2012-09-15 zvzej

你不能像这样将JavaScript与PHP混合在一起。您需要Ajax – codingbiz

可读性始终是一个考虑因素。 – 2012-09-15 21:44:35

@codingbiz - AJAX不是唯一的解决方案。 OP还可以包括一个国家和地区列表，并从中动态建立第二个下拉列表。不知道涉及的数据大小，很难给出一个好的建议。作为一个回退时，OP可以设定，让用户选择国家，然后进入下一个页面，选择房地产和JS和AJAX避免一起。 –

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

你需要的东西叫做AJAX和事件绑定。基本上，你观察第一个下拉，而当其状态变化（即用户选择一个国家），你火灾的异步请求到您的服务器，检索区域的列表，以特定国家和重建第二个下拉。如果你不需要支持大量的国家/地区，在每个请求下下载整个数据库可能是一个很好的折衷方案：这样你的用户不必等待ajax调用（将会有一个小但可感知的延迟），但是会浪费带宽。你有选择。

关于Javascript部分，您可能希望使用类似jQuery的库来观察事件并管理AJAX，可能还会使用Knockout.js。 Here is a tutorial级联下拉列表，即使服务器端的技术是ASP，而不是PHP - 但您对JS部分感兴趣。

我把涉及PHP和jQuery对AJAX和淘汰赛一个快速解决方案。你不需要完全采用它，有成千上万种可能的变化。至少，您将有一个理解要学什么的起点。

<?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-15 22:09:42 Raffaele

感谢链接到它所做的我们想要的教程，但由于正在使用另一种编码，我不知道我没有找到一种方法来使用它在我的情况。谢谢你 – zvzej

和是的我知道如果我使用mysql_ *任何人都可以到我的分贝，但这只是为了我自己的学习无所谓我在那里只是为我学习。 – zvzej

所以尽量学习最好的你可以:)如果你知道MySQL扩展是越野车和不安全的，把它扔掉！如果您知道不验证用户输入可能会导致麻烦，请使用库！真的，学习某物*错误*有什么意义？ – Raffaele

下拉菜单中选择更改第二个下拉自动选择

回答

相关问题