依赖下拉列表Jquery,AJAX,PHP,MYSQL


Dependent Drop down list Jquery, AJAX, PHP, MYSQL

我正在尝试创建一个依赖下拉列表,但在我做出第一次选择后它似乎没有填充。每个选择都将从MySQL数据库中获取数据。为了使第二个下拉列表具有任何选项(除了默认的"选择选项"值),用户必须首先在第一个下拉列表中进行选择经过大量谷歌搜索后,我很难找到一个简单的解决方案。

这是我到目前为止所拥有的,

下拉列表(我在这里使用 PHPMySQLgetter.php中生成和输出下拉列表,并将require_onceindex.php中并echo下拉列表)

$accountOptions = "";
$facilityOptions = "";
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);        
if (!$dbc) {
    die("Connection failed: " . mysqli_connect_error());
}
///ACCOUNTS/////
$accountQuery = "SELECT account_id, account_name FROM account";
$accountData = mysqli_query($dbc, $accountQuery);
//loop through data and display all accounts
while ($aRow = mysqli_fetch_array($accountData)) {
         $accountOptions .="<option value='"".$aRow['account_id']."'">" . $aRow['account_name'] . "</option>";
}
$accountDropDown=" <label>Accounts: </label><br>
                    <select name='account' id='account' onChange='getFacility(this.value)'>
                        <option selected='selected' disabled='disabled' value=''>Select account</option>
                    " . $accountOptions . "
                    </select>";
////FACILITIES/////
$facilityDropDown=" <label>Facility: </label><br>
                    <select name='facility' id='facility'>
                        <option selected='selected' disabled='disabled' value=''>Select facility</option>
                    </select>";

JQuery/AJAX

function getFacility(val) {
        $.ajax({
        type: "POST",
        url: "getfacility.php",
        data:'account_id='+val,
        success: function(data){
                $("#facility").html(data);
        }
        });
    }

获取设施.php

//db connection..

if(!empty($_POST["account_id"])) {
$accountID = $_POST['account_id'];
$sql = "SELECT *, account.account_name FROM facility "
     . "INNER JOIN account ON account.account_id = facility.account_id "
     . "WHERE facility.account_id = '". $accountID ."'";
$data = mysqli_query($dbc, $sql);
echo "<option selected='selected' disabled='disabled' value=''>Select facility</option>";
while ($fRow = mysqli_fetch_array($data)) {
     $facilityOptions .="<option value='"".$fRow['facility_id']."'">" . $fRow['facility_name'] . "</option>";
}
    $facilityDropDown=" <label>Facility: </label><br>
                <select name='facility' id='facility'>
                    <option selected='selected' disabled='disabled' value=''>Select facility</option>
                " . $facilityOptions . "
                </select>";
}

现在,当我在第一个下拉菜单中进行选择时,第二个下拉菜单没有填充任何内容,我哪里出错了?

getfacility.php 中进行更改,

如果您的 ajax 在网络(控制台)中显示 200 OK 状态和预期响应

//db connection..

if(!empty($_POST["account_id"])) {
$accountID = $_POST['account_id'];
$sql = "SELECT *, account.account_name FROM facility "
     . "INNER JOIN account ON account.account_id = facility.account_id "
     . "WHERE facility.account_id = '". $accountID ."'";
$data = mysqli_query($dbc, $sql);
echo "<option selected='selected' disabled='disabled' value=''>Select facility</option>";
while ($fRow = mysqli_fetch_array($data)) {
     echo "<option value='"".$fRow['account_id']."'">" . $fRow['account_name'] . "</option>";
}