Связанные Select-ы

Простой пример того как сделать связанные списки. Думаю комментарии излишне.

Демо Скачать

Сами Селекторы.

<select name="select1" id="select1" onchange="change_select(this)">
 <option value="Хакасия" selected="">Хакасия</option>
 <option disabled="disabled" class="opt-group">-- Города --</option>
 <option value="Абакан" >Абакан</option>
 <option value="Абаза">Абаза</option>
 <option value="Аскиз">Аскиз</option>
</select>

<select name="select2" id="select2" onchange="change_select(this)" style="display:none">
<option value=21>secet21</option>
<option value=22>secet22</option>
<option value=23>secet23</option>
<option value=24>secet24</option>
</select>

<select name="select3" id="select3" onchange="change_select(this)" style="display:none">
<option value=31>secet31</option>
<option value=32>secet32</option>
<option value=33>secet33</option>
<option value=34>secet34</option>
</select>

<select name="select4" id="select4" onchange="change_select(this)" style="display:none">
<option value=41>secet41</option>
<option value=42>secet42</option>
<option value=43>secet43</option>
<option value=44>secet44</option>
</select>
<select name="select5" id="select5" onchange="change_select(this)" style="display:none">
<option value="">Тип кузова</option>
	<option value="4200">Седан</option>
	<option value="4203">Хетчбэк</option>
	<option value="4201">Универсал</option>
	<option value="4808">Внедорожник</option>
	<option value="4196">Кабриолет</option>
	<option value="4809">Кроссовер</option>
	<option value="4197">Купе</option>
	<option value="4198">Лимузин</option>
	<option value="4810">Минивэн</option>
	<option value="4199">Пикап</option>
	<option value="4202">Фургон</option>
</select>

JavaScript код.

	<script type="text/javascript">
function change_select(elem) {
   switch (elem.value) {
       case 'Абакан':
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select2').style.display = 'inline';
           break;
		   
		case 'Абаза':
           document.getElementById('select4').style.display= 'none';
		   document.getElementById('select3').style.display= 'inline';
           document.getElementById('select2').style.display = 'none';
           break;
       
       case 'Аскиз':
           document.getElementById('select2').style.display = 'none'
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select4').style.display = 'inline';
           break;
		   
		 case '42':
           document.getElementById('select2').style.display = 'none'
		   document.getElementById('select3').style.display= 'none';
           document.getElementById('select4').style.display = 'inline';
		  document.getElementById('select5').style.display = 'inline';
		   
           break;
       
       default:
          // document.getElementById('select2').style.display = 'none';
		 //  document.getElementById('select3').style.display = 'none';
        //   document.getElementById('select4').style.display= 'none';
   }
}
	</script>
	
	

Источник урока: http://www.adatum.ru

Перепечатка данной статьи разрешается только при письменном(e-mail) разрешении автора (Сергоманова Дмитрия Николаевича) и при полном сохранении исходного вида статьи (ссылки, авторские реферальные ссылки, e-mail’ы, форматирование текста, и.т.д), а так же указания точных данных об авторстве (данные автора + прямая [без редиректа и не закрытая от индексации] ссылка на статью).