change div based on selection

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