1

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 a dropdown. I've spent hours trying to get this right and looked at a number of options. The closest I've got is a response to an earlier question on this. I've settled on is here.

I've adapted it slightly as don't want "Select...".

Script remains the same, as does the CSS. Here is the HTML which I've adapted:

<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>

and just in case here's the script: 

<script>
    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';
            }
        });
</script>
Community
  • 1
  • 1
Stuart Thompson
  • 11
  • 2

1 Answers1

0

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>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61
  • Thanks for the quick response... So how do I get the Content 1 div to show on load, be replaced by Content 2 if option 2 is selected and Content 3 if option 3 selected etc. etc? Sounds like I'm nearly there but missing something really straight forward :) – Stuart Thompson Jun 26 '16 at 18:25
  • @StuartThompson you may trigger an change event like in my updated snippet. – gaetanoM Jun 26 '16 at 18:31
  • at the moment content 1 doesn't show on load. Thx again – Stuart Thompson Jun 26 '16 at 18:33
  • @StuartThompson See to the snippet: I updated it: var event = new Event('change');document.getElementById('target').dispatchEvent(event); Bye – gaetanoM Jun 26 '16 at 18:35