根据asp.net中的值隐藏元素？答案

【问题标题】：Hide elements based on value in asp.net?根据asp.net中的值隐藏元素？
【发布时间】：2020-07-06 05:59:22
【问题描述】：

我在 ASP.NET MVC 5 Razor View 的表单中有一个包含 2 个值的下拉列表。基于下拉列表的值，我想在表单中显示和隐藏元素。我使用了 Bootstrap 3.4 .1 类“隐藏”隐藏元素和 jquery 函数 $("#Name").show() 显示元素。问题是元素总是隐藏的，不管下拉列表的值是什么.这是jquery代码：

  $(document).ready(function () {
            console.log("sss")
            $('#IndividualType').on('change', function () {            
                if (this.value == '0') {
                    $("#Name").show();
                } else {
                    $("#Name").hide();
                }
            }).trigger("change");
        });

这是 ASP.NET 代码：

 <div class="form-group hidden">

            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })

        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>

【问题讨论】：

标签： jquery css asp.net-mvc

【解决方案1】：

你可以这样做：

const val = 1; /* assuming you will get value to compare */
$(function() {
  $('#colorselector').change(function() {
    if (val === 1) { /* your condition which will prompt for true/false */
      alert("value found");
      $('.colors').hide();
      $('#' + $(this).val()).show();
    } else {
      alert("value Not found");
      $('.colors').show();
      $('#' + $(this).val()).hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

【讨论】：