jsp выпадающий список

[xolseg]

Нужна помощь, просто не знаю как даже гуглить "это":
Есть некая форма:
[SRC="java"] <p>Информация о подразделении:</p>
<p><div class="form"><form:label path="subdivision">Подразделение:</form:label></div>
<div class="form"><select name = "subdivision">
<option value = "director">Директорат</option>
<option value = "counted_dep">Бухгалтерия</option>
<option value="it">IT</option>
</select></div>
<p><div class="form"><form:label path="position">Должность:</form:label></div>
<div class="form"><select name = "position">
<option value = "sysadm">сисадмин</option>
<option value = "admin">администратор подразделения</option>
<option value="prog">програмист</option>
</select></div>[/SRC]

Как сделать такой выбор интерактивным, допустим выбрано подразделение IT, и в выдающем списке должность появляются те должности которые написаны,..
Покажите пример, а то в гугле не могу найти, даже не так, просто не знаю что искать...

Т.е. по логике в зависимости от выбора subdivision, меняется выбор position.

[gorodetskiy]

Вывод данных в зависимости от выбранного пункта списка

[mazillka]

onchange ивент в помощь
_http://www.w3schools.com/jsref/event_onchange.asp

[xolseg]

Спасибо за помощь, получилось, нечто вроде этого:

[SRC="html"] <p>Информация о подразделении:</p>
<p><div class="form"><form:label path="departament">Подразделение:</form:label></div></p>
<div class="form"><select name="subdivision" id="subdivision" onchange="change_select(this)">
<option disabled="disabled" class="opt-group">Подразделение</option>
<option value="0" >Директорат</option>
<option value="1">Бухгалтерия</option>
<option value="2">IT</option>
<option value="3">Офисный планктон</option>
</select>
<select name="position0" id="position0" onchange="change_select(this)" style="display:none">
<option value=11>Генеральный директор</option>
<option value=12>Комерческий директор</option>
</select>
<select name="position1" id="position1" onchange="change_select(this)" style="display:none">
<option value=21>Главный бухгалтер</option>
<option value=22>Бухгалтер</option>
<option value=23>Кассир</option>
</select>
<select name="position2" id="position2" onchange="change_select(this)" style="display:none">
<option value=31>Главный системный администратор</option>
<option value=32>Системный администратор</option>
<option value=33>Программист</option>
</select>
<select name="position3" id="position3" onchange="change_select(this)" style="display:none">
<option value=41>Auri</option>
<option value=42>Mongol</option>
<option value=43>Pointer*Rage</option>
</select></div>[/SRC]
[SRC="javascript"]<script type="text/javascript">
function change_select(element) {
switch (element.value) {
case '0':
document.getElementById('position0').style.display= 'inline';
document.getElementById('position1').style.display= 'none';
document.getElementById('position2').style.display = 'none';
document.getElementById('position3').style.display = 'none';
break;

case '1':
document.getElementById('position0').style.display= 'none';
document.getElementById('position1').style.display= 'inline';
document.getElementById('position2').style.display = 'none';
document.getElementById('position3').style.display = 'none';
break;

case '2':
document.getElementById('position0').style.display= 'none';
document.getElementById('position1').style.display= 'none';
document.getElementById('position2').style.display = 'inline';
document.getElementById('position3').style.display = 'none';
break;

case '3':
document.getElementById('position0').style.display = 'none';
document.getElementById('position1').style.display= 'none';
document.getElementById('position2').style.display = 'none';
document.getElementById('position3').style.display = 'inline';
break;

default:

}
}
</script>[/SRC]

[nn03]

Спасибо за помощь, получилось, нечто вроде этого:

[SRC="html"] <p>Информация о подразделении:</p>
<p><div class="form"><form:label path="departament">Подразделение:</form:label></div></p>
<div class="form"><select name="subdivision" id="subdivision" onchange="change_select(this)">
<option disabled="disabled" class="opt-group">Подразделение</option>
<option value="0" >Директорат</option>
<option value="1">Бухгалтерия</option>
<option value="2">IT</option>
<option value="3">Офисный планктон</option>
</select>
<select name="position0" id="position0" onchange="change_select(this)" style="display:none">
<option value=11>Генеральный директор</option>
<option value=12>Комерческий директор</option>
</select>
<select name="position1" id="position1" onchange="change_select(this)" style="display:none">
<option value=21>Главный бухгалтер</option>
<option value=22>Бухгалтер</option>
<option value=23>Кассир</option>
</select>
<select name="position2" id="position2" onchange="change_select(this)" style="display:none">
<option value=31>Главный системный администратор</option>
<option value=32>Системный администратор</option>
<option value=33>Программист</option>
</select>
<select name="position3" id="position3" onchange="change_select(this)" style="display:none">
<option value=41>Auri</option>
<option value=42>Mongol</option>
<option value=43>Pointer*Rage</option>
</select></div>[/SRC]
[SRC="javascript"]<script type="text/javascript">
function change_select(element) {
switch (element.value) {
case '0':
document.getElementById('position0').style.display= 'inline';
document.getElementById('position1').style.display= 'none';
document.getElementById('position2').style.display = 'none';
document.getElementById('position3').style.display = 'none';
break;

case '1':
document.getElementById('position0').style.display= 'none';
document.getElementById('position1').style.display= 'inline';
document.getElementById('position2').style.display = 'none';
document.getElementById('position3').style.display = 'none';
break;

case '2':
document.getElementById('position0').style.display= 'none';
document.getElementById('position1').style.display= 'none';
document.getElementById('position2').style.display = 'inline';
document.getElementById('position3').style.display = 'none';
break;

case '3':
document.getElementById('position0').style.display = 'none';
document.getElementById('position1').style.display= 'none';
document.getElementById('position2').style.display = 'none';
document.getElementById('position3').style.display = 'inline';
break;

default:

}
}
</script>[/SRC]

дизайн подключи еще , что б не было все так стандартно ))

[xolseg]

дизайн подключи еще , что б не было все так стандартно ))

Да делаю сижу, вкладки на подобии http://habrahabr.ru/post/223583/ - только что-то не очень получается. :-(
А дизайн, попозже чуток. Слишком много всего нужно делать, глаза разбегаются

Что-то типа такого