Начнём с места в карьер. Поиграйте со следующими списками, обращая внимание на динамическое изменение второго select'а при выборе одного из элементов первого:
Динамика рулит, да. Вышеприведённый вариант динамического изменения элементов списка (select
) правильно фунциклирует в Internet Explorer 4+, Netscape Navigator 3.x (!)6.x, Opera 6.0 и выше. К сожалению, все Оперы до шестой очень глючно реагируют на удаление и добавление элементов в select
…
Окей, а теперь разберём сам JavaScript. Приведу листинг с комментариями:
<script type="text/javascript">
<!--
/*
written by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.ru
*/
// далее у нас следует массив из улиц, содержащих дома, разделённые запятой
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>
Как вы можете видеть, мы отслеживаем событие onChange
в списке улиц и меняем соответственно список домов.
Домашнее задание: сделайте так, чтобы при отключённом JavaScript'е вместо списка с именем house
на экране выводился элемент input
с тем же именем, в котором пользователь мог бы ввести номер дома. Небольшая подсказка: не забудьте о методе document.write()
для начального списка домов…