Динамическое изменение элементов в списке SELECT

Начнём с места в карьер. Поиграйте со следующими списками, обращая внимание на динамическое изменение второго 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 в списке улиц и меняем соответственно список домов.

Живые меню или Как сделать красиво с помощью CSS и JavaScript

14-03-2009

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее Комментарии: 0 Кол. просмотров: общее - 5551 сегодня - 2

Локальная баннерная система

14-03-2009

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее Комментарии: 0 Кол. просмотров: общее - 4696 сегодня - 0

Локальная реклама

14-03-2009

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее Комментарии: 0 Кол. просмотров: общее - 5045 сегодня - 1

Использование JS для создания «умных» форм

14-03-2009

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее Комментарии: 0 Кол. просмотров: общее - 4873 сегодня - 0

Обманщик спам-роботов

14-03-2009

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее Комментарии: 0 Кол. просмотров: общее - 5095 сегодня - 1