级联下拉菜单反复填充

Question

我有一个三层级联下拉菜单

客户>项目>任务

当我选择客户时，我只想选择客户项目

当我选择一个项目时，我只想选择那个项目的任务

我有项目 > 任务（2 到 3 级）工作正常

但是当我选择一个客户时，它会填充 Project OK，但随后会为每个项目重新填充 Task。所以它会选择正确的任务，但如果上面有 3 个项目，它将填充这些任务 3 次

所以当我选择客户 A 时，它会正确填充项目 1、2、3，并选择项目 1 作为默认值

但假设项目 1 具有任务 1 和任务 2，则任务下拉列表结束于：

任务 1 任务 2 任务1 任务 2

我知道它为什么会这样做，但我不知道如何阻止它。我想我需要阻止我的 .append 触发更改事件

即使这样也没有意义，因为无论如何它都应该清除它

这是我的 Javascript：

/*
    This java script is for CREATE and EDIT popup dialogs on the Task Index page
    - Manage cascading drop downs (Client > Project, Project > Task)
    - Synchronise check box with hidden field
*/



$(document).ready(function () {
    //When Customer is changed reload Project
    // Project function reloads project tasks
    $("#Customer_ID").change(
        function () {
            // refresh projects
            refreshProjectFromClient();
        }
        )

    // When project is changed reload task
    $("#CustomerProject_ID").change(
        function () {
            refreshProjectTaskFromProject();
        }
        )

    // When chargeable is changed sync the hidden field
    // A change in a checkbox called MyCheckBox_CB 
    // will be reflected in a hidden field called MyCheckBox
    $(":checkbox").change(
        function () {
            $("#" + this.name.replace("_CB", "")).val((this.checked ? 1 : 0));
        }
        )
})





// This is called when the customer combo changes
// It reloads the project combo with the customers active projects
function refreshProjectFromClient() {
    // clear drop down
    $("#CustomerProject_ID").empty();

    // Get new project dataset via ajax based on customer and populate drop down
    $.ajax({
        type: 'POST',
        //url: '@Url.Action("GetProjects")',
        url: window.location.toString() + '/GetProjects',
        dataType: 'json',
        data: { CustomerID: $("#Customer_ID").val() },
        // success is called when dataset returns
        success: function (p) {
            // Populate with each returned member
            $.each(p, function (i, pr) {
                // is this append triggering the task onchange?
                $("#CustomerProject_ID").append(
                    '<option value="' + pr.Value + '">' +
                    pr.Text + '</option>'
                    )
                // now that it's loaded, load the project tasks
                refreshProjectTaskFromProject();
            })
        }
    });
}


function refreshProjectTaskFromProject() {
    $("#CustomerProjectTask_ID").empty();

    // Get new tasks dataset via ajax based on project and populate drop down
    $.ajax({
        type: 'POST',
        url: window.location.toString() + '/GetProjectTasks',
        dataType: 'json',
        data: { ProjectID: $("#CustomerProject_ID").val() },
        // success is called when dataset returns
        success: function (t) {
            // Populate with each returned member
            $.each(t, function (i, ta) {
                $("#CustomerProjectTask_ID").append(
                    '<option value="' + ta.Value + '">' +
                    ta.Text + '</option>'
                    );
            })
        }
    });
}

Answer 1

refreshProjectTaskFromProject() 在 $.each 中被调用。它需要在该循环之外。

编辑：哦，你在 append() 之后缺少了一个分号。