使用jQuery在MVC中基於ddl選擇隱藏或顯示錶單控件

-1

我的問題與show divs based on drop down selection中的問題類似。我有一個下拉列表中有四個選項的div。根據選擇哪一個，我希望其他兩個控件中的一個顯示在下一個div中，並且在一種情況下，它將顯示EditorFor，我希望填充該值。這是我有...使用jQuery在MVC中基於ddl選擇隱藏或顯示錶單控件

<div class="form-group"> 
    @Html.Label("OriginType", htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-4"> 
     @Html.DropDownList("OriginType", ViewData["OriginType"] as SelectList, new { htmlAttributes = new { @class = "form-control" } }) 
    </div> 
</div> 

<div class="form-group" id="pnlOrigin"> 
    @Html.LabelFor(model => model.Origin, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div id="pnlOrigin1"class="col-md-4"> 
     @Html.DropDownList("ddlORDER_10", (IEnumerable<SelectListItem>)ViewBag.Order, "Select an Order Number", new { htmlAttributes = new { @class = "form-control" } }) 
     @Html.ValidationMessageFor(model => model.Origin, "", new { @class = "text-danger" }) 
    </div> 
    <div id="pnlOrigin2"class="col-md-4"> 
     @Html.EditorFor(model => model.Origin, new { htmlAttributes = new { @class = "form-control", @id = "tbOrigin" } }) 
     @Html.ValidationMessageFor(model => model.Origin, "", new { @class = "text-danger" }) 
    </div> 
</div>

所以我需要什麼，當用戶從下拉OriginType選擇是（STK，PO，WO，其他），它會顯示或隱藏pnlOrigin格的下拉列表或EditorFor 。如果選擇了PO或WO，它將顯示ddl。如果選擇了OTHER或STK，則它將顯示EditorFor，對於STK，它將用STK預填充編輯器。

我試圖修改引用的帖子中的功能，但它不是最初隱藏控件，並從OriginType下拉列表中選擇沒有任何影響？

這是我創建的jQuery。我不確定我要去哪裏錯。

$(document).ready(function() { 
    function ShowOptions(originType) { 
     if (OriginType == "0"){ 
      $("#pnlOrigin").hide(); 
      $("#pnlOrigin1").hide(); 
      $("#pnlOrigin2").hide(); 
      // hide all before show 
      var showOriginPanel = false; 
     } 
     if (OriginType == 'STK') { 
      $("#pnlOrigin").show(); 
      $("#tbOrigin").val('STK'); 
      showOriginPanel = true; 
     } 
     if (OriginType == 'PO') { 
      $("#pnlOrigin1").show(); 
      showOriginPanel = true; 
     } 
     if (OriginType == 'WO') { 
      $("#pnlOrigin1").show(); 
      showOriginPanel = true; 
     } 
     if (OriginType == 'OTHER'){ 
      $("#pnlOrigin2").show(); 
      showOriginPanel = true; 
     } 

     if(showOriginPanel) { 
      $("#pnlOrigin").show(); 
     }  
    } 

    ShowOptions($("#OriginType").val()); 
    $("#OriginType").change(function() {   
     ShowOptions($(this).val()); 
    }); 
});

任何幫助將不勝感激！

來源

2016-03-01 Kevin Nelson

您是否考慮過使用部分視圖來完成此操作？它可能會大大簡化您的過程。你的主視圖會有最初的下拉菜單和一些空的「div」。一旦選擇完成，您可以通過ajax將值發送給您的控制器，並將部分視圖返回到包含正確下拉列表的空白'div'。 – rogerdeuce

我似乎已經找到了我的代碼的問題，雖然我不知道它爲什麼會影響函數。我有兩個隱藏的控件聲明的htmlAttribues爲「new {htmlAttributes = new {@class =」form-control「}}」。一旦我將它們更改爲「htmlAttributes：new {@class =」form-control「}」，該功能就開始正常工作。

我還必須添加一些.hides，以防用戶在發佈之前更改其初始選擇。

來源

2016-03-01 17:15:13

使用jQuery在MVC中基於ddl選擇隱藏或顯示錶單控件

回答

相關問題