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

Question

搜索了互联网。 了解了如何执行此操作。 实现了。 但这是行不通的。 我想在选择学生时显示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>

从早上开始，我一直在努力解决这个问题。 也尝试了其他方法。 什么都没有。 我究竟做错了什么？

Answer 1

变更equals给==在你的代码和它的作品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';
};

Answer 2

您可能会如下所示获得所选选项的价值：

的jsfiddle

<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.options[this.selectedIndex].value == "student" ? 'block':'none';
        teacherDiv.style.display = this.options[this.selectedIndex].value == "teacher" ? 'block':'none';
    };

</script>

Answer 3

尝试这个

 studentDiv.style.display = (this.value==="student") ? 'block':'none';
 teacherDiv.style.display = (this.value==="teacher") ? 'block':'none';

Answer 4

立即出现两个问题：

您正在尝试选择未定义ID的项目。 您正在元素值属性上调用不存在的“ .value”。

这些错误将在您的浏览器开发人员工具中报告。 使用它们。