Показ одного из select в зависимости от выбора в основом

Если в основном select выбран option-1, то показывается select-1, если выбран option-2, то показывается select-2. При выборе select-1 или select-2 сбрасываются (как на pan-termen).

by Alexander Lashchevsky

HTML

<!---Выбор основной-->
<select id="select1">
	<option>-- Выбрать --</option>
	<option value="10">Показать первый блок</option>
	<option value="20">Показать второй блок</option>
</select>

<!--Первый блок-->
<div id="block1">
	Первый блок<br>
	<select id="select2">
		<option>-- Выбрать --</option>
		<option>Выбор 1</option>
		<option>Выбор 2</option>
		<option>Выбор 3</option>
	</select>
</div>

<!--Второй блок-->
<div id="block2">
	Второй блок<br>
	<select id="select3">
		<option>-- Выбрать --</option>
		<option>Выбор 4</option>
		<option>Выбор 5</option>
		<option>Выбор 6</option>
	</select>
</div>

CSS

#block1, #block2 {display: none; margin-top: 50px;}

JavaScript

document.getElementById("select1")
    .onchange = function () {
        var b = {
            10: "block1",
            20: "block2",
        }, c = this.value,
            a;
        for (a in b) document.getElementById(b[a])
            .style.display = 0 == c || c == a ? "block" : "none"
        
       document.getElementById("select2").value = '-- Выбрать --' 
       document.getElementById("select3").value = '-- Выбрать --'
};