Начнём с места в карьер. Поиграйте со следующими списками, обращая внимание на динамическое изменение второго select’а при выборе одного из элементов первого:

<script type="text/javascript"> <!-- // далее у нас следует массив из улиц, содержащих дома, разделённые запятой var aHouseValues = new Array( "12/15,18,123", "2,4", "2/8,10/12", "3", "2,4,12,5/6,8" ); // ф-ция, возвращающая массив домов по заданной улице function getHouseValuesByStreet(index){ var sHouseValues = aHouseValues[index]; return sHouseValues.split(","); // преобразуем строку в массив домов } // главная ф-ция, выводящая динамически список домов function MkHouseValues(index){ var aCurrHouseValues = getHouseValuesByStreet(index); var nCurrHouseValuesCnt = aCurrHouseValues.length; var oHouseList = document.forms["address"].elements["house"]; var oHouseListOptionsCnt = oHouseList.options.length; oHouseList.length = 0; // удаляем все элементы из списка домов for (i = 0; i < nCurrHouseValuesCnt; i++){ // далее мы добавляем необходимые дома в список if (document.createElement){ var newHouseListOption = document.createElement("OPTION"); newHouseListOption.text = aCurrHouseValues[i]; newHouseListOption.value = aCurrHouseValues[i]; // тут мы используем для добавления элемента либо метод IE, либо DOM, которые, alas, не совпадают по параметрам… (oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null); }else{ // для NN3.x-4.x oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false); } } } // инициируем изменение элементов в списке домов, в зависимости от текущей улицы MkHouseValues(document.forms["address"].elements["street"].selectedIndex); //--> </script> Сама форма в нашем примере выглядит так: <form name="address" action="#"> Улица: <select name="street" onChange="MkHouseValues(this.selectedIndex)"> <option value="ул. Хрюнделя">ул. Хрюнделя</option> <option value="пер. Неизвестного">пер. Неизвестного</option> <option value="ул. Оттопыркина">ул. Оттопыркина</option> <option value="ул. Мир-Труд-Май">ул. Мир-Труд-Май</option> <option value="бул. Нихренасебефамилия">бул. Нихренасебефамилия</option> </select>  Дом: <select name="house"> <option value="N/A">N/A</option> </select> </form>

Динамика рулит, да. Вышеприведённый вариант динамического изменения элементов списка правильно фунциклирует в Internet Explorer 4+, Netscape Navigator 3.x (!)–6.x, Opera 6.0 и выше. К сожалению, все Оперы до шестой очень глючно реагируют на удаление и добавление элементов…

Как вы можете видеть, мы отслеживаем событие onChange в списке улиц и меняем соответственно список домов.

Источник:  internet-technologies.ru