Change Div Based On Selection

Trying to change div based on a drop-down selection. Loads of things work but not in WordPress! 

e.g. https://codepen.io/mmp1992/pen/burfK

or this, which is closer:

https://codepen.io/shawkdsn/pen/HCfxi

Seems like the script I put in for the header is completely ignored. Also, put iframe for the second one in a shortcode but still no.

Previous:

<div style="width:300px;">
<div style="float:right;">
<div id="diva" style="background-color:red;width:100px;height:100px;display:none;"></div>
<div id="divb" style="background-color:green;width:100px;height:100px;display:block;">default showing</div>
<div id="divc" style="background-color:yellow;width:100px;height:100px;display:none;"></div>
<div id="divd" style="background-color:blue;width:100px;height:100px;display:none;"></div>
</div>
<div>
<select id="select1" onchange="showDivs('div',this)">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
</div>
</div>

Script:

<script type="text/javascript">
function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
        var div = document.getElementById(prefix+chooser.value);
        div.style.display = 'block';
}
window.onload=function() {
  document.getElementById('select1').value='a';//set value to your default
}
</script>