根据javascript中的选择选项显示/隐藏div

上网搜了一下。学会了如何做到这一点。实施了它。但这不起作用。 我想在选择学生时显示 div 学生，在选择教师时显示 div 老师。这是 jsp 文件的一部分。

HTML 代码：

<table>
    <tr>
       <td>
         <select id="userType">
             <option value="student">STUDENT</option>
             <option value="teacher">TEACHER</option>
             <option value="admin">ADMIN</option>
         </select>
       </td>
    </tr>
<table>

JavaScript 代码：

<script type="text/javascript">

    var elem = document.getElementById('userType');
    elem.onchange = function() {
        var studentDiv = document.getElementById('student');
        var teacherDiv = document.getElementById('teacher');
        studentDiv.style.display = (this.value.equals("student")) ? 'block':'none';
        teacherDiv.style.display = (this.value.equals("teacher")) ? 'block':'none';
    };

</script>

从早上起我就一直在努力把这件事做好。也尝试过其他方法。什么都不起作用。我究竟做错了什么？

Change equals to ==在你的代码中并且它有效DEMO

var elem = document.getElementById('userType');
elem.onchange = function() {
  var studentDiv = document.getElementById('student');
  var teacherDiv = document.getElementById('teacher');
  studentDiv.style.display = (this.value == "student") ? 'block' : 'none';
  teacherDiv.style.display = (this.value == "teacher") ? 'block' : 'none';
};