Question

我是MVC C＃Razor的新手，我在PHP中做过这个，我尝试在Jquery中使用我以前的代码（如下所示）

<script>
  $(document).ready(function(){
    $('.CurrentStatus').change(function () {
      if(this.value == "Non-Teaching") {
        $('#div-CurrentTDepartment').fadeOut('fast');
        $('#div-CurrentTPostion').fadeOut('fast');
        $('#div-CurrentNTDepartment').fadeIn('fast');
        $('#div-CurrentNTPostion').fadeIn('fast');
      }
      else if (this.value == "Teaching") {
        $('#div-CurrentTDepartment').fadeIn('fast');
        $('#div-CurrentTPostion').fadeIn('fast');
        $('#div-CurrentNTDepartment').fadeOut('fast');
        $('#div-CurrentNTPostion').fadeOut('fast');
      }
      else {
        $('#div-CurrentTDepartment').fadeIn('fast');
        $('#div-CurrentTPostion').fadeIn('fast');
        $('#div-CurrentNTDepartment').fadeIn('fast');
        $('#div-CurrentNTPostion').fadeIn('fast');
      }
    });
  });
</script>

这是我的创建代码

<div class="form-group">
  @Html.LabelFor(model => model.Status, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.DropDownList("Status", new SelectList(ViewBag.Statusdll, "Value", "Text"), "Select Status", new { @class = "form-control", @onchange = "location = this.value;" })
  </div>
</div>

<div class="form-group" id="div-NTDepartment">
  @Html.LabelFor(model => model.NTDepartment, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.NTDepartment, new { htmlAttributes = new { @class = "form-control" } })
  </div>
</div>

<div class="form-group" id="div-NTPosition">
  @Html.LabelFor(model => model.NTPosition, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.NTPosition, new { htmlAttributes = new { @class = "form-control" } })
  </div>
</div>

<div class="form-group" id="div-TDepartment">
  @Html.LabelFor(model => model.TDepartment, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.TDepartment, new { htmlAttributes = new { @class = "form-control" } })
  </div>
</div>

错误是 - 如果您在下拉列表中选择'非教学'，则会显示页面'/员工/非教学'的404错误，这实际上是404错误，因为我没有任何错误这样的页面。

它应该只隐藏或显示页面中的div。

Answer 1

因为您在选择了某个选项后添加了有效onchange = "location = this.value;的事件window.location.href = TheValueOfYourSelectedOption。

从添加到@Html.DropDownList()的属性中删除它，改为使用

$('#Status').change(function () {
  ....

或如果这适用于多个控件，请添加类名

@Html.DropDownList( ...., new { @class = "form-control", @class = "CurrentStatus" })

剃刀隐藏/显示div onchange选择

1 个答案: