Show/hide div according to select option in javascript

Question

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 selected. This is a part of a jsp file.

HTML code :

<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 code:

<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>

I've been trying to get this right since morning. Tried other methods as well. Nothing works. What am I doing wrong?

Your solution has some problems and is throwing errors in the console. Debug these out in your browser developer tools. That's how to learn how to do this. — Tim Grant
– Tim Grant, Commented May 1, 2016 at 17:42

Nenad Vracar · Accepted Answer · 2016-05-01 17:34:58Z

2

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';
};

answered May 1, 2016 at 17:34

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sumurai8 Over a year ago

Why use jsfiddle when you could just include a snippet in the answer 9_9

Samrat Dutta Over a year ago

I have tried this too. And yes, it works in jfiddle. And it should work everywhere. But for some very weird reason, this doesn't work on my computer. I have no clue why. I tried opening the file with both Firefox and Chrome. If style display is set to none, nothing shows even after changing the selection. If I delete the style attribute, both teacher and student is shown, even on selecting different options. This makes no sense. The code should work. This never happens.

Nenad Vracar Over a year ago

If your js code is in separate file make sure you included it correctly, also try with this HTML code jsfiddle.net/Lg0wyt9u/721

Aycan Yaşıt · Accepted Answer · 2016-05-01 17:34:54Z

0

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>

answered May 1, 2016 at 17:34

Aycan Yaşıt

2,1204 gold badges37 silver badges42 bronze badges

Comments

misss-popcorn · Accepted Answer · 2016-05-01 17:38:23Z

0

try this

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

answered May 1, 2016 at 17:38

misss-popcorn

6103 silver badges14 bronze badges

Comments

Tim Grant · Accepted Answer · 2016-05-01 17:48:09Z

0

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.

answered May 1, 2016 at 17:48

Tim Grant

3,4664 gold badges25 silver badges31 bronze badges

Collectives™ on Stack Overflow

Show/hide div according to select option in javascript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related