MVC4 Показывать поле описания при выборе «другого» из выпадающего списка

Question

У меня есть простая проблема, которая меня просто ускользает. Я видел множество примеров, но просто не могу пощупать правильный код. Проблема: мне нужно показать текстовое поле ввода, только если в раскрывающемся списке выбрано «Другое».

Мои 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> 

Мой Просмотр Код:

@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> 
    } 
} 

DropDownList корректно работает на пост обратно к контроллеру, но я хотел бы показать окно описания ввода. Не видели ничего там, что бы дублировать этот тип поведения (не в моих поискахх). Как всегда любая помощь была бы оценена!

Answer 1

Способ, которым вы настроили showGenderDescription, проверяется только один раз. Для того, чтобы привязать его к любым изменениям, используйте класс (или аналогичный), чтобы обернуть «другой» поле ввода:

<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> 

Тогда вы можете показать/скрыть его внутри функции change JS (ы):

if ($("#GenderId").val() == 3) { 
    $(".gender-description").show(); 
} else { 
    $(".gender-description").hide(); 
} 

Answer 2

Я добавил родительский div для редакторов и изменил функции JQuery. Пожалуйста, дайте мне знать, если есть какие-либо проблемы

Script

<script> 
    $(function() { 
    $("#ShowGenderDescriptionContainer").css("display","none"); 
     $('#GenderId').change(function() { 
      if ($("#GenderId").val() == 3) { 
     $("#ShowGenderDescriptionContainer").css("display","block"); 
      } 
     }); 
     $("#SettingId").change(function() { 
      if ($("#SettingId").val() == 1) { 
       $("#ShowGenderDescriptionContainer").css("display","block"); 
      } 
     }); 
    }); 
</script> 

Посмотреть

@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> 
     <div id = "ShowGenderDescriptionContainer"> 
      <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> 
    }