基于 MVC 和 Jquery 中的下拉选择隐藏或显示特定表单答案

【问题标题】：Hiding or Showing a paticular form based on the dropdown selection in MVC and Jquery基于 MVC 和 Jquery 中的下拉选择隐藏或显示特定表单
【发布时间】：2014-01-09 14:32:22
【问题描述】：

当我在下拉菜单中选择“调整”时，我可以获得值，但是在呈现正确的表单时，表单中的下拉 UI 没有正确的值。它几乎可以工作，但我觉得我没有正确执行 jquery。在视图中我有 2 个不同的表单，我使用 Jquery 根据下拉选择来选择要显示的表单。

这里是 JQUERY

 $(document).ready(function() {
        $("#adjustments").hide();
        $(".TypeClass").change(function() {
            var selected = $(".TypeClass option:selected").text();
            alert(selected);
            if (selected == "Received") {
                $("#received").show();
                $("#adjustments").hide();
            }
            if (selected == "Adjustment") {
                $("#adjustments").show();
                $("#received").hide();
            }
        });


        $(".TypeClass2").change(function() {
            var selected = $(".TypeClass2 option:selected").text();
            alert(selected);
            if (selected == "Received") {
                $("#received").show();
                $("#adjustments").hide();
                               }
            if (selected == "Adjustment") {
                $("#adjustments").show();
                $("#received").hide();
                              }

        });
    });

这里是风景

<div id="received">
   <fieldset>
   <legend>New Inventory Transaction</legend>
    <table>
       <tr><td>@Html.LabelFor(model => model.ItemName)</td><td>@Html.DisplayFor(model => model.ItemName)</td></tr>
       <tr><td>@Html.LabelFor(model => model.ItemNumber)</td><td>@Html.DisplayFor(model => model.ItemNumber)</td></tr>
       <tr><td>@Html.LabelFor(model => model.XactTypeId)</td><td>@Html.DropDownListFor(model => model.XactTypeId, (SelectList)ViewData["InvType"], "Choose Type", new { @class = "TypeClass" })</td></tr>   
       <tr><td>@Html.LabelFor(model => model.XactTotalCost)</td><td>@Html.EditorFor(model => model.XactTotalCost)</td></tr>
       <tr><td></td><td><p> <input type="submit" value="Create" /></p></td></tr>     
       </table>   
       </fieldset>
       </div>    
        <div id="adjustments">
       <fieldset>
       <legend>New Inventory Transaction</legend>   
       <table>
       <tr><td>@Html.LabelFor(model => model.ItemName)</td><td>@Html.DisplayFor(model => model.ItemName)</td></tr>
       <tr><td>@Html.LabelFor(model => model.ItemNumber)</td><td>@Html.DisplayFor(model => model.ItemNumber)</td></tr>
        <tr><td>@Html.LabelFor(model => model.WharehouseName)</td><td>@Html.EditorFor(model => model.WharehouseName)</td></tr>     
       <tr><td></td><td><p> <input type="submit" value="Create" /></p></td></tr>   

       </table>

       </fieldset>
       </div>

【问题讨论】：

在我测试的 UI 部分，下拉列表与我设置的警报不匹配。是否有一些 jquery 可以让我在 C# dropdownlist1.SelectedValue = "myValue" 中这样设置它

标签： jquery asp.net-mvc-3

【解决方案1】：

设置下拉列表值只需使用
$("ddl").val("你的 val");
并获取选定的值 usev
var selectedval = $("ddl").val();

【讨论】：

【解决方案2】：

下拉

  @Html.DropDownListFor(m => m.AttendenceBonus.BonusIn, new SelectList(Model.BonusInList, "Value", "Text", Model.AttendenceBonus.BonusIn), new { @class = "selectBoxRegular", onchange = "return GetBonusType(this);"})

脚本

<script>
    function GetBonusType(ctrl) {

       var x = $("#AttendenceBonus_BonusIn").val();

       // hide any control by id

            if (x == "Fixed") {
                $('#persent').text("");
                $('#Applylevel').show();
                $('#AttendenceBonus_BonusApplyOn').show();
            }

         // Show any control by id
           else {
               $('#persent').text("%");
               $('#Applylevel').hide();
               $('#AttendenceBonus_BonusApplyOn').hide();
            }
     }

</script>

You can also see the GIF

【讨论】：