JSFiddle - React, Tailwind, and code Playground

by Aycan Yasit

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>

<div id="student" style="display:none">
       STUDENT    
</div>

<div id="teacher" style="display:none">    
       TEACHER    
</div>

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