php - 具有 PHP 和 MySQL 的多个依赖选择框

Question

好的，所以要么我不能正确地搜索网络，要么我不能理解我的搜索结果的意义，但是经过几天的搜索和尝试自己做，我仍然没有简单的和可以理解的答案!

我有一个带选择框的航类搜索表单。选择框结果通过 PHP 从 MySQL 填充。

例子:

前飞:

Departure city - "London"

Destination city - All cities exept London

Flight date - All flight dates for flight London->Forward Destination City

向后飞行:

Departure city - Again all cities exept London

Destination city - All cities exept Backward Departure City

Flight date - All flight dates for flight Backward Departure City->Backward Destination City

我只使用 PHP 和表单 GET 方法制作此表单没问题，但是，当然，我想摆脱页​​面重新加载。显而易见的解决方案 - AJAX。

我的方法:

1. 在选择框上使用 onChange 事件调用带有属性 'this.value' 的 javascript 函数
2. javascript 函数使用 GET 方法向服务器(.php 文件)发送 XMLHttpRequest
3. .php 文件包含带有 MySQL 请求的函数，使用简单的“if ($_GET['value_sent_with_javascript_function'])”调用
4. javascript 函数将 php 响应放在一个 div 中 - document.getElementById("div_id").innerHTML=xmlhttp.responseText;

这适用于两个文件(第一个是“父”，第二个 - “子” - 根据“父”框选择的值填充)。但是，如果我想使用相同的方法来填充第三个字段(依赖于“子项”的字段)，那是行不通的。由于我不是 JavaScript 专家，所以我无法弄清楚这一点。

我打赌有一个简单的解决方案!

Answer 1

一个简单的例子，应该让你上路:

Main.php 文件

    <script type="text/javascript">
    function loadXMLDoc(step)
    {
        var showPage;
        var rrestultBox;

        if (step==1)
        {
            showPage = 'destination.php?select=' + document.getElementById('departure').value;
            resultBox = 'destinationBox';
        }
        if (step==2)
        {
            showPage = 'times.php?select=' + document.getElementById('destination').value;
            resultBox = 'timesBox';
        }
        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.getElementById(resultBox).innerHTML=xmlhttp.responseText;
        }
    }
        xmlhttp.open("GET",showPage,true);
        xmlhttp.send();
    }
</script>
<form name="selectBoxes">
    <select name="departure" id="departure" onchange="loadXMLDoc(1);">
        <option value="sydney">Sydney</option>
        <option value="canberra">Canberra</option>
        <option value="Melbourne">Melbourne</option>
    </select>
</form>
<div id="destinationBox"></div>
<div id="timesBox"></div>

destination.php

<form name="selectBoxes">
    <select name="destination" id="destination" onchange="loadXMLDoc(2);">
        <option value="sydney">Sydney</option>
        <option value="canberra">Canberra</option>
        <option value="Melbourne">Melbourne</option>
    </select>
</form>

times.php 文件

<form name="selectBoxes">
<select name="times" id="times"">
    <option value="">1pm</option>
    <option value="">2pm</option>
    <option value="">3pm</option>
</select>

观看实际操作:here

**已更新，忘记添加'destination.php'