title: Change the content of a div based on selection from dropdown menu with first option visible with JavaScript
body: <p>I'm setting up a select button to change the content beneath it. I've found out how to change the content below, however I need one of the options shown before any selection begins.</p>
  
  <p>[Default Selection 1]</p>
  
  <p>displays: nothing</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("target").addEventListener("change", function() {
    "use strict";
    var vis = document.querySelector(".vis"),
        target = document.getElementById(this.value);
    if (vis !== null) {
      vis.className = "inv";
    }
    if (target !== null) {
      target.className = "vis";
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.inv {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="target"&gt;
    &lt;option value=""&gt;Select...&lt;/option&gt;
   &lt;option value="content_1"&gt;Option 1&lt;/option&gt;
   &lt;option value="content_2"&gt;Option 2&lt;/option&gt;
   &lt;option value="content_3"&gt;Option 3&lt;/option&gt;
   &lt;select&gt;
  
  &lt;div id="content_1" class="inv"&gt;Content 1&lt;/div&gt;
  &lt;div id="content_2" class="inv"&gt;Content 2&lt;/div&gt;
  &lt;div id="content_3" class="inv"&gt;Content 3&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>