Javascript 为什么我的ajax代码没有更新我的第二个下拉列表？

我不知道为什么我的代码不起作用。我基本上有两个下拉列表，第一个是从mssql数据库填充的，我希望第二个下拉列表根据第一个列表中的选择进行更新

下面是填充下拉框的代码：

<?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;
}
?>

然后，我使用它填充第一个下拉列表：

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

对于第二个下拉框，我有以下内容：

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

我通过以下方式调用我的ajax：

<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>

我的getter页面内容如下：

<?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;

?>

---

正如上面2条评论所指出的，再次感谢您的帮助！错误出现在填充第一个下拉列表的代码中。它应该是小写的“ID”，如下所示：

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;
}
?> 

---

在我看来基本上是对的。Javascript控制台中是否存在任何错误？如果您查看网络选项卡，您是否看到它正在进行AJAX调用，以及响应是否正确？这些都是在发布到这里之前应该采取的基本调试步骤。$row['ID']可能应该是$row['ID']，因为您在选择列表中使用小写列名。在对getter.php的ajax调用的响应部分中，执行console.logdata查看浏览器控制台必须说什么打开开发者工具F12，转到网络选项卡，然后从菜单中选择一些内容。您应该看到AJAX调用，然后单击它查看详细信息，包括发送的参数和接收的响应。检查原始区域菜单的HTML，确保正确填写了所有值=xxx。