Premise:
--------

I am creating a page that contains many HTML options with relations like `Product-> SubProduct-> Task`. `Task` depends on `SubProduct` which in-turn depends on `Product` to Load.

I am repeating my code multiple times in my javascript.

Problem:
--------

I have repeatedly tried to change this code, but I have a multitude of variables. I tried creating a function, but in vain since I am using `$each`

I accept any suggestions to refactor this code in any capacity.

Code:
-----

```js
$("#ProductId").change(function () {
    $("#SubProductId").empty();
    $("#TaskId").empty();
    $("#SubProductId").append('<option value="0">[Select ...]</option>');
    $.ajax({
        type: 'POST',
        url: urlGetSubProducts,
        dataType: 'json',
        data: { productId: $("#ProductId").val() },
        success: function (data) {
            $.each(data, function (i, data) {
                $("#SubProductId").append('<option value="'
                 + data.SubProductId + '">'
                 + data.Name + '</option>');
            });
            ValidateFilledFields();
        },
        error: function (ex) {
            alert('Fail to find subproduct.' + ex);
        }
    })
    return false;
})

    return false;
 })
```

```html
<div>
 @Html.LabelFor(m => m.ProductId, "Product")
 @Html.DropDownList("ProductId", null, htmlAttributes: new { @class = "form-control", required = "required" })
</div>
```

Notes:
------

`ProductId` is the property id from the HTML above