為什么新填充的下拉菜單不會觸發AJAX更改功能？

Question

我目前正在實現一個三重依賴下拉菜單（想想國家/地區/州/城市），該菜單中填充了AJAX請求。

這是我的下拉結構的代碼片段：

        //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的.trigger（）方法 。

在這里可以找到類似的問題和答案： 觸發“ onchange”事件