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

【问题标题】：Why isn't my ajax code updating my second dropdown?为什么我的 ajax 代码没有更新我的第二个下拉列表？
【发布时间】：2017-03-02 16:27:44
【问题描述】：

我不知道为什么我的代码不起作用。我基本上有两个下拉列表，第一个是从 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;

?>

【问题讨论】：

在我看来基本上是对的。 Javascript 控制台中是否有任何错误？如果您查看“网络”选项卡，您是否看到它在进行 AJAX 调用，并且响应看起来是否正确？这些都是您在此处发布之前应采取的所有基本调试步骤。
$row['ID'] 应该是$row['id']，因为您在SELECT 列表中使用小写的列名。
在对getter.php 的ajax 调用的响应部分中执行console.log(data)，看看你的浏览器控制台要说什么
打开开发者工具 (F12)，进入网络标签，然后从菜单中选择一些东西。您应该会看到 AJAX 调用，然后您可以单击它查看详细信息，包括发送的参数和收到的响应。
查看原Region菜单的HTML，确保value="xxx"全部填写正确。

标签： javascript php jquery ajax drop-down-menu

【解决方案1】：

正如上面 2 cmets 所指出的（再次感谢您的帮助！）错误出现在填充第一个下拉列表的代码中。它应该是一个小写的“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;
}
?>

【讨论】：