使用php和javascript下拉onchange方法

我有2個從MySQL數據庫讀取數據的下拉菜單。我使用php連接數據庫。第二個下拉框應根據第一個下拉列表中的選項進行填充。該過程似乎如下（糾正我，如果我錯了）：使用php和javascript下拉onchange方法

php部分連接到MySQL數據庫並填充下拉1。
用戶在dropdown1上選擇一個值，並調用onchange事件。
在onchange函數（這是javascript）中，查詢被髮送到MySQL數據庫以根據dropdown1選擇（這裏是php再次，對吧？）提取dropdown2的值。
dropdown2被填充。

我不知道如何使用JavaScript和PHP爲了完成這項任務（上面的數字3）。或者也許這不是完全可以做到的。請指教！

這是我的代碼。正如你在下面看到的，我將一個javascript函數放在一個我認爲是錯誤的php代碼中。這就是我卡住的地方！

<php 
$sql="SELECT distinct category FROM table1"; 
$result=mysql_query($sql); 

$optionsCat=""; 
while($row = mysql_fetch_row($result)){ 
    $optionsCat.="<option value=\"$row[0]\">$row[0]</option>"; 
} 

function genSubCat($catID){ 
$sql="SELECT distinct subcategory FROM table1 where category=".$catID; 
$result=mysql_query($sql); 

$optionsSubCat=""; 
while($row = mysql_fetch_row($result)){ 
    $optionsSubCat.="<option value=\"$row[0]\">$row[0]</option>"; 
} 
} 

?> 
<select name="catDropDown" onChange="genSubCat(this)"> 
    <option value="0">Select category</option> 
    <?php echo $optionsCat?> 
</select> 
<select name="subcategoryDropDown"> 
    <option value="0">Select subcategory</option> 
    <?php echo $optionsSubCat?> 
</select>

來源

2012-12-14 saghar

您是否嘗試過的jQuery？它使得這種事情在大多數時候更容易。（當然使用javascript沒有錯！） – Trufa

不，我沒有。其實這就是我想要了解的。我有點困惑什麼更常用於這樣的任務。 – saghar

一旦我弄明白了，我仍然需要知道php和javascript/jquery如何將值傳遞給對方（看數字3）。 – saghar

我覺得你應該先自己學習如何使用基於Web的語言。你提供的代碼是完全錯誤的。您正嘗試通過HTML訪問PHP代碼？我的意思是來吧！

第一條規則：基於服務器的語言無法與基於客戶端的語言進行通信。

您必須發送請求並獲取響應，您希望執行的下拉操作的方式是向PHP代碼發送請求並從中獲取相關數據。正如特魯法在評論中所說，你可能想看看jQuery圖書館，但在此之前，我認爲你需要檢查AJAX。

來源

2012-12-14 21:46:58 MahanGM

嘿，每個人都必須從某個地方開始，另外，我建議jQuery的原因是因爲AJAX，因爲AJAZ吸吮:)而jQuery使它變得簡單... – Trufa

沒有冒犯！我只是這樣說，因爲這確實很簡單。 – MahanGM

在這裏，我們有一個簡單的頁面，其中包含輸入。在其中輸入一個單詞，然後單擊輸入。 Ajax將調用myphp.php腳本並返回您在原始分區下方鍵入的相同單詞。

test.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#faq_search_input").blur(function(){ 
    var faq_search_input = $(this).val(); 
    var dataString = 'keyword='+ faq_search_input; 
    if(faq_search_input.length>1){ 
     $.ajax({type: "GET", url: "myphp.php", data: dataString, 
       success: function(server_response) { 
       document.getElementById("searchresultdata").style.display = "block"; 
       $('#searchresultdata').html(server_response).show(); 
       } 
      }); 
     } 
     return false; 
    }); 
}); 

</script> 
    </head> 
    <body> 
<div class="searchholder"> 
    <input name="query" class="quicksearch" type="text" id="faq_search_input" /> 
<div id="searchresultdata" class="searchresults" style="display:none;"> </div> 
</div> 
    </body> 
</html>

myphp.php：

<?PHP 
    echo $_GET['keyword']; 
?>

來源

2012-12-14 21:55:32

使用php和javascript下拉onchange方法

回答

相關問題