为什么我的Ajax代码不更新第二个下拉列表？

Question

I have no idea why my code isn't working. I basically have two dropdowns, the first is populated from an mssql database and I want the second dropdown to update dependant on the selection in the first.

Below is my code which populates a dropdown box:

<?php
session_start();
$serverName = "REDACTED";
$connectionInfo = array( "Database"=>"REDACTED", "UID"=>"REDACTED", "PWD"=>"REDACTED");
$conn = sqlsrv_connect( $serverName, $connectionInfo);

if (!isset($_SESSION['nID']))
{
    header("Location: Login.php");
    die();
}

function loadRegion()
{
    include 'config.php';
    $output = '';
    $regionQuery = 'select distinct id, region from regionsHaiss order by id';
    $regionPopulate = sqlsrv_query($conn, $regionQuery, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
    while($row = sqlsrv_fetch_array($regionPopulate))
    {
        $output .= "<option value=\"".htmlspecialchars($row['ID'])."\">".$row['region']."</option>";
    }
    return $output;
}
?>

I then use this to populate the first dropdown:

<p>Select a Region
<select name ="region" id ="region">
<option value ="">Select Region</option>
<?php echo loadRegion(); ?>
</select></p>

For the second dropdown box I have the following:

<p>Select a Territory
<select name="territory" id="territory">
<option value="">Select Territory</option>
</select></p>

I call my ajax via:

<script>
$(document).ready(function(){
    alert("ready");
    $('#region').change(function(){
        var region_id = $(this).val();
        $.ajax({
            url:"getter.php",
            method:"POST",
            data:{regionId:region_id},
            dataType:"text",
            success:function(data){
                $('#territory').html(data);
            }
        });
    });
});
</script>

My getter page reads as follows:

<?php 
session_start();
include 'config.php';

$output = '';
$sql = "SELECT distinct id,territory,rid FROM territoriesHaiss where RID = '".$_POST["regionId"]."' order by id";
$result = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
$output = '<option value ="">Select Territory</option>';

while($row = sqlsrv_fetch_array($result))
    {
        $output .= "<option value=\"".htmlspecialchars($row['ID'])."\">".$row['territory']."</option>";
    }

echo $output;

?>

Answer 1

As pointed out by the 2 comments above (thanks again for the help!) the error was in the code that populates the first dropdown. It should have been a lowercase 'ID', like follows:

function loadRegion()
{
    include 'config.php';
    $output = '';
    $regionQuery = 'select distinct id, region from regionsHaiss order by id';
    $regionPopulate = sqlsrv_query($conn, $regionQuery, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
    while($row = sqlsrv_fetch_array($regionPopulate))
    {
        $output .= "<option value=\"".htmlspecialchars($row['id'])."\">".$row['region']."</option>";
    }
    return $output;
}
?>