Question

当我在下拉列表中选择“调整”时，我可以获得“值”，但在呈现正确的表单时，表单中的“下拉列表”UI没有正确的值。它几乎可以工作，但我觉得我没有正确地做jquery。在视图中我有两种不同的形式，我使用Jquery根据下拉选择选择我想要显示的表单。

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

Answer 1

设置下拉列表值只需使用
$（“ddl”）。val（“你的val”）;
并获得所选值usev
var selectedval = $（“ddl”）。val（）;

Answer 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

根据MVC和Jquery中的下拉选择隐藏或显示特定表单

2 个答案: