如何在 PHP 和 AJAX 中实现级联下拉菜单？

Question

我需要一些认真的帮助或建议，我已经花费了无数时间来研究和发现空虚的东西。

我有一个项目，我需要使用 PHP 从 MDB 数据库中提取数据。 我已经成功连接到数据库，我可以查询数据库并将结果显示在表格中，甚至可以使用文本输入搜索数据库。

我的客户想要具有多个下拉菜单的高级搜索功能。这些下拉列表正在从数据库中获取值。这一切都还好。我可以从数据库中填充下拉列表。

该数据库是一个车辆数据库（ID、库存编号、品牌、型号、年份、价格、功能等）。不幸的是，所有车辆数据都在一个表中。例如，数据库中有四辆阿斯顿马丁汽车，每辆都有自己的 ID 和型号。

我知道最好至少有两个单独的表：品牌和型号。但是数据库是由第三方应用程序生成的，它将数据库的副本保存到服务器上，这就是我连接的那个。

问题是：使用 PHP 和 AJAX，从同一个表中绘制数据时是否可以有级联下拉菜单？例如，如果我从 Make 选项中选择了 ASTON MARTIN，第二个下拉菜单将只显示与 ASTON MARTIN 相关的模型？

请参阅下面的尝试尝试...此脚本成功地将数据库中的 Make 列加载到第一个下拉列表中，并将数据库中的 Modal 列成功加载到第二个下拉列表中，但它们没有链接。就目前而言，第一个选项是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>

EDIT 根据您的解决方案引入上述代码。谢谢你。

该函数似乎可以工作，但它使用 make 列而不是 model 列填充第二个下拉列表。知道为什么吗？

谢谢你，德昂·琼克

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>

在接收端，使用 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();
             }
   ?>

到文件的开头。 （当然，在任何包含之后，数据库连接器代码）