How to display content depending on dropdown menue user selection

How to display content depending on dropdown menue user selection

I have a dropdown menu at the bottom of a form with 6 different options. I
need to display different content on a div below this menu depending on
which option is selected.
No additional content should be visible until the user is to select one of
the options and once the user select one of the options only content
associated with that specific option should be visible.
I need to create this functionality using JavaScript but my knowledge of
JavaScript is very limited and I don't seem to find what I need online.
I believe what I need to do is create 6 different divs(one for each
option) and toggle a class that makes them visilble once its respective
title is selected.
Here is the dropdown menu that I have:
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {%
endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my
child</option>
<option value="not-school">Not in school but still
learning</option>
<option value="publisher">A Publisher or interested Kno
partner</option>
</select>
</div>
</div>
Any help will be greatly appreciated.