DropDownFor change event not firing - html

Question

I have the following Razor markup:
#Html.DropDownListFor(x => Model.WorkTypeId, new SelectList(Model.WorkTypeList, "Id", "Name", Model.WorkTypeId), " - please select - ", new { style = "background-color: yellow;"})
#Html.DropDownListFor(x => Model.PhaseGroupId, new SelectList(Model.PhaseGroupList, "Id", "Name", Model.PhaseGroupId), " - please select - ", new { style = "background-color: yellow;"})
Then I load the form these reside on using a jQuery $.get call, and assign change handlers to both dropdowns in the success function of the call:
function(data) {
$("#formContainer").html(data);
$("#WorkTypeId").change(function () {
lookupMatrixValues($("#WorkTypeId").val(), $("#PhaseGroupId").val());
});
$("#PhaseGroupId").change(function () {
lookupMatrixValues($("#WorkTypeId").val(), $("#PhaseGroupId").val());
});
})
When I select an item in the WorkTypeId dropdown, the change event does not fire, while if I select a PhaseGroupId item, its event does fire.
Also, when I POST the form, no matter what value is selected for a worktype, the value of the model property WorkTypeId is always zero, as if the select itself doesn't detect a change event.
If I look at what is rendered for the DropDownFor markup, I see the two selects are rendered slightly differently:
<select id="WorkTypeId" name="WorkTypeId" style="background-color: yellow;">
...
<select data-val="true" data-val-number="The field PhaseGroupId must be a number." id="PhaseGroupId" name="PhaseGroupId" style="background-color: yellow;">
I am curious as to why only the PhaseGroupId select has the data-val and data-val-number attributes while the WorkTypeId select does not have these attributes. The model properties are exactly the same:
public int? WorkTypeId { get; set; }
public int? PhaseGroupId { get; set; }
Why is the WorkTypeId select rendered differently and why does its bound model property never reflect what is selected. No matter what is selected, $("#WorkTypeId").val() is always zero.

Answer 1

You have a strange lambda syntax. IMHO should be
#Html.DropDownListFor(m=> m.WorkTypeId, ... //or model=>model.WorkTypeId
#Html.DropDownListFor(m => m.PhaseGroupId ...
and check if you have another WorkTypeId somewhere in your view. Javascript binds the first id it meets.