Question

我目前正在实施一个三重依赖下拉菜单（想想country-＆gt; state-＆gt; city），其中填充了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's .trigger() method。

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

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

2 个答案:

事件不是由代码中的值更改