如何在PHP和AJAX中實現級聯下拉菜單？

Question

我需要一些認真的幫助或建議，我花費了無數個小時來研究和提出空洞的事情。

我有一個項目，我需要使用PHP從MDB數據庫中提取數據。 我已經成功連接到數據庫，我可以查詢數據庫並在表格中顯示結果，我甚至可以使用文本輸入來搜索數據庫。

我的客戶需要具有多個下拉菜單的高級搜索功能。這些下拉列表正在從數據庫中獲取值。這一切都還好。我可以填充數據庫的下拉列表。該數據庫是一個車輛數據庫（編號，庫存號，品牌，型號，年份，價格，功能等）。不幸的是，所有的車輛數據都在一張桌子上。例如，數據庫中有四輛ASTON MARTIN汽車，每輛汽車都有自己的ID和型號。

我知道最好至少有兩個單獨的表：make和model。但數據庫是由第三方應用程序生成的，該應用程序將數據庫的副本保存到服務器，並且這是我連接的那個。

現在的問題是：使用PHP和AJAX，從同一張表中繪製數據時，是否可能會有級聯下拉菜單？例如，如果我從Make selection中選擇了ASTON MARTIN，第二個下拉列表只會顯示與ASTON MARTIN相關的模型？

請參閱下面的嘗試嘗試...此腳本成功地將數據庫中的生成列加載到第一個下拉列表，並將數據庫中的模式列加載到第二個下拉列表中，但它們未鏈接。目前，第一個選項是ASTON MARTIN，它的相應模型是CORSA（這根本不正確）。

 <script type="text/javascript"> 

      function loadXMLDoc() { 
      var xmlhttp; 
      if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
     } else {// code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
     document.frm.modelSelection.innerHTML=xmlhttp.responseText; 
      } 
     } 

     var makevalue=document.frm.makeSelection.value; 

     xmlhttp.open("GET","?ajaxmake="+makevalue,true); 
     xmlhttp.send(); 
      } 

      </script> 

      <?php 

      $dbName = "C:/xampp/htdocs/new/db/savvyautoweb.mdb"; 

      // Throws an error if the database cannot be found 
      if (!file_exists($dbName)) { 
      die("Could not find database file."); 
      } 

      // Connects to the database 
      // Assumes there is no username or password 
      $conn = odbc_connect("Driver={Microsoft Access Driver (*.mdb)};Dbq=$dbName", '', ''); 

      ?> 

      <form action="" method="post" name="frm"> 
     <select name="makeSelection" onchange="loadXMLDoc()"> 

      <?php 
     $resultMake = odbc_exec($conn, "SELECT Make FROM Vehicle ORDER BY Make") or die (odbc_errormsg()); 
     while ($rowMake = odbc_fetch_array($resultMake)) { 
    echo "<option value='$rowMake[Make]'>$rowMake[Make]</option>"; 
     } 
       ?> 
      </select> 
      <select name="modelSelection"> 

      <?php 
     if (isset($_REQUEST['ajaxmake'])) { 
     $resultModel = odbc_exec($conn, "SELECT Model FROM Vehicle") or die (odbc_errormsg()); 

     while ($rowModel = odbc_fetch_array($resultModel)) { 
      echo "<option value='$rowModel[Model]'>$rowModel[Model]</option>"; 
     } 

     die(); 
      } 
       ?> 
      </select> 
      <input type="submit" name="submit" value="Go"> 
       </form> 

編輯運至上述代碼根據您的解決方案。這次真是萬分感謝。

該函數似乎可以工作，但它使用make列而不是模型列填充第二個下拉列表。任何想法爲什麼？

謝謝你，出溫瓊克

Answer 1

爲了您的選擇，您可以添加一個onchange屬性，這樣

<select name="makeselection" onchange="filtermodelselection()"> 

您添加一個功能filtermodelselection（），其內容從你的makeselection像所選擇的選項（提供一個名稱的形式，或者ID你的選擇，我會使用「FRM」現在的表格名稱）

var makeid=document.frm.makeselection.value; 

您發送您的Ajax請求的頁面。然後用makeid你可以讓一個Ajax請求這樣的服務器：http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get_unique

function loadXMLDoc() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.frm.modelSelection.innerHTML=xmlhttp.responseText; 
    } 
    } 
var makevalue=document.frm.makeSelection.value; 
xmlhttp.open("GET","?ajaxmake="+makevalue,true); 
xmlhttp.send(); 
} 

在服務器端，你會得到一個$ _REQUEST [「ajaxmake」]變量。

if (isset($_REQUEST['ajaxmake'])) { 
    //do the magic the query, and then echo like what you did here: 
while ($rowModel = odbc_fetch_array($resultModel)) { 
    echo "<option value='$rowModel[Model]'>$rowModel[Model]</option>"; 
} 
//then die, to not echo anything else accidentally 
die(); 
} 

輸出示例：

<option value='AUDI'>AUDI</option> 
<option value='BMW'>BMW</option> 

在recieving側，使用Ajax你給從服務器收到價值的modelSelection的innerHTML.like：

document.frm.modelselection.innerHTML=xmlhttp.responseText; 

如果事情是不清楚，請隨時問。

編輯： 把這個部分：

<?php 
     if (isset($_REQUEST['ajaxmake'])) { 
     $resultModel = odbc_exec($conn, "SELECT Model FROM Vehicle") or die (odbc_errormsg()); 

     while ($rowModel = odbc_fetch_array($resultModel)) { 
      echo "<option value='$rowModel[Model]'>$rowModel[Model]</option>"; 
     } 

     die(); 
      } 
    ?> 

到文件的開頭。 （任何包含之後，數據庫連接器代碼當然）