为什么我的AJAX请求没有从下拉菜单中获取正确的值？

我正在构建一个Web应用程序，该应用程序将利用依赖于三重关系的下拉菜单（请考虑“国家/地区”->“州/州”>“城市”），并允许用户更改其详细信息。

这是下拉结构的代码段（请注意，默认选项的dropAccounts值为'test'）：

        //create a drop down of available accounts
        echo 'Available Accounts: ';

        echo '<select name="dropAccounts" class="dropAccounts">';
        //if there is at least one account available
        if (count($accsAvailable) > 0) {
            echo '<option value="test">---Select an account---</option>'; //default option
            foreach ($accsAvailable as $account) {
                //populate from API
                echo '<option value=' . $account->getId(). '>' . $account->getName() . '</option>';
            }
        } else {
            echo '<option value="0">---No accounts available---</option>'; //else if no accounts exist
        }
        echo '</select>';

        //for available webproperties
        echo '<br> Available Webproperties: ';
        echo '<select name="dropProperties" class="dropProperties" id="dropProperties">';
        echo '<option selected="selected">---Select a webproperty---</option>';
        echo '</select>';

        //for available profiles
        echo '<br> Available Profiles: ';
        echo '<select name="dropProfiles" class="dropProfiles" id="dropProfiles">';
        echo '<option selected="selected">---Select a profile---</option>';
        echo '</select>';

我正在使用onchange事件和AJAX从第一个下拉菜单dropAccounts（国家）提取值，并使用该值索引API调用以填充第二个下拉菜单dropProperties（状态），如下所示：

$(".dropAccounts").change(function()
{
       var accountID = $(".dropAccounts").val(); //gets the account ID from drop-down value
       populateProperties(accountID);
});

function populateProperties(accountID) {
                $.ajax
                ({
                    type: "POST",
                    url: "propertyID.php",
                    data: {
                        'accountID' : accountID
                    },
                    cache: false,
                    success: function(html)
                    {
                        $(".dropProperties").html(html);

                        // Populate profiles after properties load
                        populateProfiles($(".dropProperties").val());
                    } 
                });
            }

AJAX请求将替换dropProperties（状态）下拉列表的内容，然后以类似的方式调用该populateProfiles()函数以填充最终的下拉列表dropProfiles（城市）：

        function populateProfiles(propertyID) {
            $.ajax
            ({
                type: "POST",
                url: "profileID.php",
                data: {
                    'propertyID' : propertyID
                },
                cache: false,
                success: function(html)
                {
                    $(".dropProfiles").html(html);
                } 
            });
        }

此方法可以正常工作，以使用正确的dropAccounts（国家/地区）填充前两个下拉列表dropProperties，但是在第三个下拉列表dropProfiles（城市）中检索到的值不是从中获取的值dropProperties。

在profileID.php脚本中：

<?php
$propertyID = $_POST['propertyID'];
echo '<option> Property ID: ' . $propertyID . '</option>';
?>

的值从默认选项中$propertyID返回。我仔细检查了所有变量，但感到很困惑。我想知道是否有经验更丰富的人能找出问题所在？'test'dropAccounts

提前致谢！