为什么新填充的下拉菜单不会触发 AJAX 更改功能？

Question

我目前正在实现一个包含 AJAX 请求的三重依赖下拉菜单（想想国家->州->城市）。

这里是我的下拉结构的代码sn-p：

        //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="0">---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">';
    echo '<option selected="selected">---Select a webproperty---</option>';
    echo '</select>';

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

重要的变量是dropAccounts（国家）、dropProperties（州）和dropProfiles（城市）。第一个下拉列表由 API 调用填充，然后 AJAX 请求在 onchange 事件中从其中获取值：

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".dropAccounts").change(function()
        {
            var accountID = $(this).val(); //gets the account ID from drop-down value

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

        });

    });
</script>

然后 propertyID.php 然后像这样填充dropProperties（假设我正在从数据库中获取值）：

if($_POST['accountID'])
{  
    if ($accountID != "0") {
        foreach ($webItem as $item) {
            echo '<option value=' . $item->getId() . '>' . $item->getName() . '</option>';
        }
    }
}
else {
    echo '<option value="0">---Select a webproperty---</option>';
}

我同样设置了第三个下拉菜单 (dropProfiles) 以完全相同的方式填充，假设当第二个下拉菜单重新填充时它会触发 javascript onchange 事件。但是，当我让第二个下拉列表重新填充时，它不会执行第三个下拉列表的 javascript。

这是应该触发 PHP 脚本填充 dropProfiles 的 javascript onchange 函数：

<script type="text/javascript">
    $(document).ready(function()
    {
        $(".dropProperties").change(function()
        {
            var id = $(this).val(); //gets the profile ID from drop-down value

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

        });

    });
</script>

有解决办法吗？我是不是走错了路？

Answer 1

当您想要加载级联值时，最好的办法是手动调用“填充”函数。为此，您需要将它们分解为命名函数。这使您能够在任何时候触发下拉填充。

$(document).ready(function()
{

    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());
            } 
        });

    }

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

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

    $(".dropProperties").change(function()
    {
        var id = $(this).val(); //gets the profile ID from drop-down value
        populateProfiles(id);
    });

    // Call populateProperties on page load to kick things off
    populateProperties($(".dropAccounts").val());
});

Answer 2

代码中的值更改不会触发事件

onchange 事件必须由用户操作触发或由脚本显式触发。

您可能会受益于使用jQuery's .trigger() method。

可以在这里找到类似的问题和答案：Trigger "onchange" event