asp.net mvc的显示/隐藏DIV时Dropdownbox选项更改

Question

我有我的Dropdownbox名单.cshtml如下：

<div class="form-group"> 
    @Html.Label("Role", new { @class = "col-md-2 control-label" }) 
    <div class="col-md-10"> 
     @Html.DropDownList("Name", null, new { @class = "form-control" }) 
    </div> 
</div> 

这是我第一次和第二div。

<div class="StudentSection" style="display:none;"> 
Some contents 
</div> 

<div class="LecturerSection" style="display:none;"> 
Some contents 
</div> 

在.js

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#StudentSection").hide(); 
    $("#LecturerSection").hide(); 

    $("#Name").change(function() { 
     if ($("#Name").val() == "Student") { 
      $("#StudentSection").show(); 
      $("#LecturerSection").hide(); 
     } 
     else { 
      $("#LecturerSection").show(); 
      $("#StudentSection").hide(); 
     } 
    }); 
}); 
</script> 

这些代码不为我的作品提供了我的代码。

Answer 1

变化都#StudentSection，#LecturerSection为.StudentSection，.LecturerSection，因为他们似乎是类不 ID

看到这个工作的演示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class="col-md-10"> 
 
     <select id="Name"> 
 
    <option>Student</option> 
 
    <option>Lecturer</option> 
 
</select> 
 
    </div> 
 
</div> 
 
<div class="StudentSection" style="display:none;"> 
 
StudentSection Some contents 
 
</div> 
 

 
<div class="LecturerSection" style="display:none;"> 
 
LecturerSection Some contents 
 
</div> 
 

 
<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $(".StudentSection").hide(); 
 
    $(".LecturerSection").hide(); 
 

 
    $("#Name").change(function() { 
 
     if ($("#Name").val() == "Student") { 
 
      $(".StudentSection").show(); 
 
      $(".LecturerSection").hide(); 
 
     } 
 
     else { 
 
      $(".LecturerSection").show(); 
 
      $(".StudentSection").hide(); 
 
     } 
 
    }); 
 
}); 
 
</script>