Show/hide Div According To Select Option In Javascript

Searched the internet. Learnt how to do this. Implemented it. But it doesn't work. I want to show the div student when student is selected and the div teacher when teacher is sele

Solution 1:

Change equals to == in your code and it works 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';
};

Solution 2:

You may get value of selected option like below:

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>

Solution 3:

try this

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

Solution 4:

Two problems immediately pop out:

You are trying to select items that do not have id's defined. You are calling a non-existent ".value" on the element value property.

These errors will be reported in your browser developer tools. Use them.