为什么我的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的值从dropAccounts的默认选项返回为'test'。我仔细检查了所有的变量，我被难住了。我想知道有没有更有经验的人能找出问题所在?

提前感谢!