Скрыть элементы на основе значения в asp. net?

Question

У меня есть раскрывающийся список с 2 значениями в форме в ASP. NET MVC 5 Razor View. На основе значений раскрывающегося списка я хочу показать и скрыть элементы в form.I использовал Bootstrap 3.4.1 класс «hidden», чтобы скрыть элементы, и jquery function $ («# 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>

Answer 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>