MVC4 Show a description field when selecting 'other' from a dropdownlist

MVC4 Show a description field when selecting 'other' from a dropdownlist

I have a simple problem that just eludes me. I've seen lots of examples
but just can't put my finger on the correct code. The problem: I need to
show a text input field only if 'Other' is selected from a dropdownlist.
My JavaScript:
@{
ViewBag.Title = "Create Client";
var showGenderDescription = false;
var showSettingDescription = false;
}
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script>
$(function () {
$('#GenderId').change(function () {
if ($("#GenderId").val() == 3) {
showGenderDescription = true;
}
});
$("#SettingId").change(function () {
if ($("#SettingId").val() == 1) {
showGenderDescription = true;
}
});
});
</script>
My View Code:
@using (Html.BeginForm())
{
<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>
@if(showGenderDescription)
{
<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>
}
}
The dropdownlist works correctly on post back to the controller but I
would like to show the description input box. Haven't seen anything out
there that would duplicate this type of behavior (not in my searches
anyway). As always any help would be appreciated!