Ajax填充其他2个选择

I'm having problems with my Ajax multiselect. I posted my 3 files im using.

If i remove the if(!empty($_POST["customerID"])), the WHERE and the elseif i get the files to work so the SQL query should be correct.

My system is using materialize.css with loads of other Jquery elements so it should be working.

My index.php file with the select:

<?php
$conn = new mysqli(servername, username, password, dbname);
mysqli_set_charset($conn,"utf8");
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$query = $conn->query("SELECT * FROM customers ORDER BY customerName ASC");

//Count total number of rows
$rowCount = $query->num_rows;
?>
<select id="customer">
    <option value="">Select Country</option>
    <?php
    if($rowCount > 0){
        while($row = $query->fetch_assoc()){
            echo '<option name="customerID" value="'.$row['customerID'].'">'.$row['customerName'].'</option>';
        }
    }else{
        echo '<option value="">Country not available</option>';
    }
    ?>
</select>

<select id="project">
    <option value="">Select country first</option>
</select>

<select id="subproject">
    <option value="">Select state first</option>
</select>

My Jquery to handle my data:

$(document).ready(function(){
$('#customer').on('change',function(){
    var customerID = $(this).val();
    if(customerID){
        $.ajax({
            type:'POST',
            url:'loadProjects.php',
            data:'customerID='+customerID,
            success:function(html){
                $('#project').html(html);
                $('#subproject').html('<option value="">Select project 

first</option>');
                }
            });
        }else{
            $('#project').html('<option value="">Select customer first</option>');
            $('#subproject').html('<option value="">Select project first</option>');
        }
});

$('#project').on('change',function(){
    var projectID = $(this).val();
    if(projectID){
        $.ajax({
        type:'POST',
        url:'loadProjects.php',
        data:'projectID='+projectID,
        success:function(html){
            $('#subproject').html(html);
        }
    });
    }else{
        $('#subproject').html('<option value="">Select project first</option>');
    }
});
});

My loadProjects.php handling the MySQL fetching

<?php include("./includes/db.php"); ?>

<?php
$conn = new mysqli(servername, username, password, dbname);
mysqli_set_charset($conn,"utf8");
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if(!empty($_POST["customerID"])){
    $query = $conn->query("SELECT * FROM projects WHERE customerID = ".$_POST['customerID']."");

    //Count total number of rows
    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo '<option value="">Select project</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value="'.$row['projectID'].'">'.$row['projectName'].'</option>';
        }
    }else{
        echo '<option value="">Project not available</option>';
    }
elseif(!empty($_POST["projectID"])){
    $query = $conn->query("SELECT * FROM subproject WHERE projectID = ".$_POST['projectID']."");

    //Count total number of rows
    $rowCount = $query->num_rows;

    if($rowCount > 0){
        echo '<option value="">Select subproject</option>';
        while($row = $query->fetch_assoc()){
            echo '<option value="'.$row['subprojectID'].'">'.$row['subProjectName'].'</option>';
        }
    }else{
        echo '<option value="">Subproject not available</option>';
    }
}