下拉菜單中選擇更改第二個下拉自動選擇

我有一個網頁，我有一個形式幾個方面來輸入文字和兩個下拉菜單中選擇國家的選擇是第一位的，並根據在女巫的國家選擇第二應顯示該國家選擇的房產。我的頁面連接到我的數據庫，從那裏得到的國家和地區....我有一個國家名稱和每個國家的屋頂表。所以我試圖做的是讓它改變狀態來自動選擇自動取決於女巫國家選擇與峯會形式，因爲這進入一個新的條目，我的數據庫中的另一個表。我看到使用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

下拉菜單中選擇更改第二個下拉自動選擇

回答

相關問題