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

Posted 2023-05-08

【中文标题】根据asp.net中的值隐藏元素？

【英文标题】：Hide elements based on value in 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>

【参考方案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>