cascading drop downs repeatedly populated

Question

I have a three level cascading drop down

Customer > Project > Task

When I pick a customer I just want to pick that customers projects

When I pick a project I just want to pick that projects tasks

I have the project > task (level 2 to 3) working OK

But when I pick a Customer, it populates Project OK, but then re-populates Task for every project. So it picks the correct tasks but if there are 3 projects above, it will populate those tasks 3 times

So when I pick Customer A, it correctly populates Project 1, 2, 3, and picks Project 1 as the default

But then assuming Project 1 has Task 1 and Task 2, the Task drop down ends up with:

Task 1 Task 2 Task 1 Task 2

I can see why it would be doing this but I don't how to stop it. I think I need to stop my .append from triggering the change event

Even then it doesn't make sense because it should be clearing it anyway

Here is my 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() is called from with in the $.each. It needs to be outside of that loop.

Edit: Oh, and you're missing a semi-colon after the append().