дерево зависимостей select от select
 

добрый день. помогите пожалуйста разобраться как выстроить правильно дерево зависимостей. ситуация такая: при выборе #1 для id='default' появляется еще 1 селект, в нем выбираем - появляется еще один и т.д. проблема появляется когда после этих операций я выбираю #2 для id='default', ко всем моим селектам добавляется еще один, а мне необходимо, чтобы дерево для #1 исчезло, как это сделать - не знаю.. вот что у меня есть:

<select id='default' onchange='change(this.options[this.selectedIndex].value);'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='select1' style="display: none;" onchange='change1(this.options[this.selectedIndex].value);'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='select2' style="display: none;" onchange='change2(this.options[this.selectedIndex].value);'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<script>
function change(s) {
	 s = document.getElementById('select'+s);
	 s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';
	};
function change1(s) { ...
</script>

при изменения селекта верхнего уровня id='default' прячьте все селекты нижнего уровня, кроме того, что должен появиться

подскажите пожалуйста как это осуществить

так?

function change(_this) {   
    s = _this.options[_this.selectedIndex].value
	s = document.getElementById('select'+s);
	_this.style.display = 'none';
	s.style.display == 'none' ? s.style.display = '' : s.style.display = 'none';	
};

<select id='default' onchange='change(this);'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='select1' style="display: none;" onchange='change(this);'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='select2' style="display: none;" onchange='change(this);'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>

спасибо!