<style>
.next div {
display: none;
}
.vis {
display: block !important
}
</style>
<script>
function Selected(sel) {
var next = sel.nextSibling.nextSibling; //nextElementSibling;
var elems = next.getElementsByClassName('vis');//сделать кроссбраузерной
if (elems.length != 0) {
elems[0].className = '';
}
if (sel.options[0].value == 0) {
if (sel.selectedIndex != 0) {
next.children[sel.selectedIndex - 1].className = 'vis';
}
} else {
next.children[sel.selectedIndex].className = 'vis';
}
}
</script>
<form>
<select name="layer" aria-required="true" onChange="Selected(this)">
<option value="0" selected="selected">no layer</option>
<option value="1">layer 1</option>
<option value="2">layer 2</option>
<option value="3">layer 3</option>
<option value="4">layer 4</option>
</select>
<div class="next">
<div id='Label1'><span class="note">layer 1</div>
<div id='Label2'><span class="note">layer 2</div>
<div id='Label3'><span class="note">layer 3</div>
<div id='Label4'><span class="note">layer 4</div>
</div>
<select name="layer" aria-required="true" onChange="Selected(this)">
<option value="1">layer 1</option>
<option value="2">layer 2</option>
<option value="3">layer 3</option>
<option value="4">layer 4</option>
</select>
<div class="next">
<div id='Label1' class="vis"><span class="note">layer 1</div>
<div id='Label2'><span class="note">layer 2</div>
<div id='Label3'><span class="note">layer 3</div>
<div id='Label4'><span class="note">layer 4</div>
</div>
</form>
