title: How to show/hide divs based on a dropdown box selection
body: <p>I know I'm not the only person with this problem, but I couldn't find a javascript solution yet.</p>
  
  <p>This is my dropdown selection. Now I want to display a specific message for each option.</p>
  
  <pre><code>&lt;select name="lehrberuf" id="lehrberuf" class="browser-default" required&gt;
      &lt;option value="" disabled selected class="grey-text"&gt;Lehrberuf&lt;/option&gt;
      &lt;option value="Anlagenfuehrer/-in EFZ"&gt;Anlagenführer/-in EFZ&lt;/option&gt;
      &lt;option value="Anlagen- und Apparatebauer/-in EFZ"&gt;Anlagen- und Apparatebauer/-in EFZ&lt;/option&gt;
      &lt;option value="Automatiker/-in EFZ"&gt;Automatiker/-in EFZ&lt;/option&gt;
      &lt;option value="Elektroinstallateur/-in EFZ"&gt;Elektroinstallateur/-in EFZ&lt;/option&gt;
      &lt;option value="Elektroplaner/-in EFZ"&gt;Elektroplaner/-in EFZ&lt;/option&gt;
      &lt;option value="Fachmann/-frau Betriebsunterhalt EFZ"&gt;Fachmann/-frau Betriebsunterhalt EFZ&lt;/option&gt;
      &lt;option value="Informatiker/-in EFZ"&gt;Informatiker/-in EFZ&lt;/option&gt;
      &lt;option value="Kauffrau / Kaufmann EFZ"&gt;Kauffrau / Kaufmann EFZ&lt;/option&gt;
      &lt;option value="Konstrukteur/-in EFZ"&gt;Konstrukteur/-in EFZ&lt;/option&gt;
      &lt;option value="Kunststofftechnologe/-technologin EFZ"&gt;Kunststofftechnologe/-technologin EFZ&lt;/option&gt;
      &lt;option value="Laborant/-in EFZ Fachrichtung Chemie"&gt;Laborant/-in EFZ Fachrichtung Chemie&lt;/option&gt;
      &lt;option value="Logistiker/-in EFZ Fachrichtung Lager"&gt;Logistiker/-in EFZ Fachrichtung Lager&lt;/option&gt;
      &lt;option value="Mediamatiker/-in EFZ"&gt;Mediamatiker/-in EFZ&lt;/option&gt;
      &lt;option value="Polymechaniker/-in EFZ"&gt;Polymechaniker/-in EFZ&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This should be the message for each option.</p>
  
  <pre><code>&lt;div class="row col s12"&gt;
      &lt;div class="hiddenmessage1"&gt;You have to select &lt;strong&gt;any one option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage2"&gt;You have selected &lt;strong&gt;red option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage3"&gt;You have selected &lt;strong&gt;green option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage4"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage5"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage6"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage7"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage8"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage9"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage10"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage11"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage12"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage13"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
      &lt;div class="hiddenmessage14"&gt;You have selected &lt;strong&gt;blue option&lt;/strong&gt; so i am here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need some help with the JS.</p>
  
  <p>Thank you in advance.</p>