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

[xolseg]

Нужна помощь, просто не знаю как даже гуглить "это":
Есть некая форма:

                <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>
Code: Java

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

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

[gorodetskiy]

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

[mazillka]

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

[xolseg]

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

               <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>
Code: HTML

<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>
Code: Javascript

[nn03]

Сообщение от xolseg

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

               <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>
Code: HTML

<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>
Code: Javascript

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

[xolseg]

Сообщение от nn03

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

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

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