mvc 4 jquery change function in edit view

mvc 4 jquery change function in edit view

This is an odd problem that I'm hoping someone can find an solution to. I
have essentially the same views that use dropdownlist with jqurey function
that shows and hides a field depending on the selection make in the
dropdownlist box. I have this working in a create view using ViewBag to
pass in the selectlist for the drop down. I was wondering if I could do
the same in my edit view using a view model and a DropDownListFor helper.
JQuery function in create view:
$("#GenderId").change(function () {
if ($("#SelectedGenderId").val() == 3) {
$(".gender-description").show();
} else {
$(".gender-description").hide();
}
});
And the Create View:
<div class="editor-label">
@Html.LabelFor(model => model.GenderId, "Gender")
</div>
<div class="editor-field">
@Html.DropDownList("GenderId", (SelectList)ViewBag.GenderId,
"--Select One--", new { id = "GenderId" })
@Html.ValidationMessageFor(model => model.GenderId)
</div>
<div class="gender-description">
<div class="editor-label">
@Html.LabelFor(model => model.GenderDescription)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.GenderDescription)
@Html.ValidationMessageFor(model => model.GenderDescription)
</div>
</div>
In order to get my Edit view drop downs to work correctly I changed my
methodology to a view model instead of ViewBag (which I think I will also
want to change my Create View over to if I can get the edit view to work
correctly).
Edit View:
<div class="editor-label">
@Html.LabelFor(model => model.Client.GenderId, "Gender")
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.SelectedGenderId, Model.Genders)
@Html.ValidationMessageFor(model => model.Client.GenderId)
</div>
<div class="gender-description">
<div class="editor-label">
@Html.LabelFor(model => model.Client.GenderDescription)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Client.GenderDescription)
@Html.ValidationMessageFor(model =>
model.Client.GenderDescription)
</div>
</div>
View Model:
public class ClientViewModel
{
public Client Client { get; set; }
[Display(Name = "Client Gender")]
public string SelectedGenderId { get; set; }
public IEnumerable<SelectListItem> Genders { get; set; }
[Display(Name = "Client Setting")]
public string SelectedSettingId { get; set; }
public IEnumerable<SelectListItem> Settings { get; set; }
}
The ViewModel binding works and the drop downs populate with the existing
selection which I could not get to work correctly using the ViewBag (which
is why I changed to a ViewModel instead of ViewBag in the first place).
I'm not sure what-so-ever on how I would change the jquery function to
bind it to the DropDownListFor to listen for changes. Any ideas would be
very much appreciated.