MVC5中的JQuery下拉更改操作

Question

我有一個下拉列表，其中有兩個選項，我從我的模型列表中查詢，我想使用此下拉選項來取代兩個視圖。

如果數據已存在，則首選項顯示爲下拉框。 第二選擇顯示錶單以添加新記錄。

本所認爲

<div class="row-fluid"> 
         <div class="control-group offset3"> 
           <label for="text" class="control-label">Select Option</label> 
           <div class="controls"> 
            @Html.DropDownListFor(model => model.ParentChoicesId, Model.ParentChoices, "-- Select Choice --", new { required = "true", id = "choice", @class = "input-xlarge" }) 
           </div> 
          </div> 
         <hr /> 
         <div id="result"> 
         <div class="row-fluid" id="newParent"> 
         <div class="span6" > 
          <div class="control-group"> 
           <label for="text" class="control-label">Title</label> 
           <div class="controls"> 
            @Html.DropDownListFor(model => model.pTitleId, Model.pTitle, "-- Choose Title --", new { @class = "input-xlarge", required = "true" }) 
           </div> 
          </div> 
          <div class="control-group"> 
           <label for="FirstName" class="control-label">First name</label> 
           <div class="controls"> 
            @Html.TextBoxFor(model => model.pFirstName, new { @class = "input-xlarge", required = "true" }) 
           </div> 
          </div> 
          ..... 

          </div> 
         </div> 
         <div class="span6"> 
          <div class="control-group"> 
           <label for="text" class="control-label">Nationality</label> 
           <div class="controls"> 
            @Html.DropDownListFor(model => model.pCountryId, Model.pCountry, "-- Choose Country --", new { required = "true", @class = "input-xlarge" }) 
           </div> 
          </div> 

...............

     </div> 
          </div> 
         <div class="row-fluid" id="existParent"> 
         <div class="span6" > 
          <div class="control-group"> 
           <label for="text" class="control-label">Title</label> 
           <div class="controls"> 
            @Html.DropDownListFor(model => model.ParentId, Model.Parents, "-- Choose Parent --", new { @class = "input-xlarge", required = "true" }) 
           </div> 
          </div> 
         </div> 
          </div> 
         </div> 

        </div> 

這是控制器我quering我的選擇

var parentChoice = GetParentChoice().Select(t => new SelectListItem 
     { 
      Value = t.Value, 
      Text = t.Text 
     }); 
     model.ParentChoices = parentChoice.AsEnumerable(); 


public static IQueryable<SelectListItem> GetParentChoice() 
    { 
     var choiceList = new List<SelectListItem>() 
     { 
     new SelectListItem{ Text="New Parent", Value = "1" }, 
     new SelectListItem{ Text="Existing Parent", Value = "2" } 
     }; 

     return choiceList.AsQueryable(); 
    } 

這裏是jquery代碼

<script> 
    $(document).ready(function() { 
     $("#result").fadeOut(0); 
    }); 

    var selectedChoice; 

    $("#choice").change(function() { 

     selectedChoice = $("#choice").val().trim(); 

     if (selectedChoice === "-- Select Choice --") { 
      $("#result").fadeOut(); 
     } 
     else if (selectedChoice.val() === 1) { 
      $("#result").hide("#existParent") 
      $("#result").empty().append("#newParent").fadeIn(); 
     } 
    }); 

</script> 

這是我迄今爲止所做的，我需要請我需要一些幫助，以完成它tankz您的時間。

Answer 1

我想通了，所以我想出了這個和它的工作就好形成我感謝反正

<script> 
    $(document).ready(function() { 
     $("#result").fadeOut(0); 
    }); 

    $("#choice").change(function() { 

     selectedChoice = $("#choice").val(); 

     if (selectedChoice == 1) { 
      $("#existParent").hide() 
      $("#result").fadeIn(); 
      $("#newParent").show(); 
     } 
     else if (selectedChoice == 2) { 
      $("#newParent").hide() 
      $("#result").fadeIn(); 
      $("#existParent").show(); 
     } 
     else if (selectedChoice == 0) 
     { 
      $("#result").fadeOut(0); 
     } 

    }); 

</script>