使用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选择隐藏或显示表单控件

回答

相关问题