divを表示/非表示javascriptの選択肢に応じて

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> 

。他の方法も試しました。何も動作しません。私は間違って何をしていますか？あなたのコード内で==に

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 1

あなたは以下のように選択されたオプションの値を得ることができますこの

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

Answer 2

変更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 3

試して動作します：

Answer 4

2つの問題がすぐに飛び出し：あなたが定義されたIDを持っていない項目を選択しようとしている

。 element valueプロパティに存在しない ".value"を呼び出しています。

これらのエラーは、お使いのブラウザの開発者ツールに報告されます。それらを使用してください。