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 = newEvent('change');
   document.getElementById('target').dispatchEvent(event);
}

.inv {
  display: none;
}

<selectid="target"><optionvalue="content_1">Option 1</option><optionvalue="content_2">Option 2</option><optionvalue="content_3">Option 3</option></select><divid="content_1"class="inv"style="width:250px; margin-left:-10px; height:420px">Content 1</div><divid="content_2"class="inv"style="width:250px; margin-left:-10px; height:420px">Content 2</div><divid="content_3"class="inv"style="width:250px; margin-left:-10px; height:420px">Content 3</div>