Div Display Hide On Selection

Hi There _ I'm a Newbie to all of this and really struggling with a dropdown menu that displays a div on loading but then hides the div and replaces with another on selection from

Solution 1:

You may add your code at the end of the body or you can use the window.onload event:

window.onload = function() {
  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';
    }
  });
  
  // send change event to element to select the first div...
  var event = new Event('change');
   document.getElementById('target').dispatchEvent(event);
}

.inv {
  display: none;
}

<select id="target">
    <option value="content_1">Option 1</option>
    <option value="content_2">Option 2</option>
    <option value="content_3">Option 3</option>
</select>

<div id="content_1" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 1</div>
<div id="content_2" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 2</div>
<div id="content_3" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 3</div>