Главная страница статей --> Советы по фотошопу, графике и хитрости в построении php кода

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

Источник: realcoding.net

Начнём с места в карьер. Поиграйте со следующими списками, обращая внимание на динамическое изменение второго 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=ул. Хрюнделя>ул.&nbsp;Хрюнделя</option>
<option value=пер. Неизвестного>пер.&nbsp;Неизвестного</option>
<option value=ул. Оттопыркина>ул.&nbsp;Оттопыркина</option>
<option value=ул. Мир-Труд-Май>ул.&nbsp;Мир-Труд-Май</option>
<option value=бул. Нихренасебефамилия>бул.&nbsp;Нихренасебефамилия</option>
</select>
&nbsp;Дом:
<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 в списке улиц и меняем соответственно список домов.



Похожие статьи:
- Таблицы и границы
- Списки a la MS Word
- Какой нужен сайт? (продолжение)
- Язык XML
- SEO-специалист делится своими секретами
- Продвижение сайта в поисковых системах
- PHP include уязвимость: от теории к практике
- Легкая навигация
- Upload File (Загрузка файла на сервер средствами Perl)
- Использование шаблонов при программировании WEB-приложений
- ПОИСКОВИКИ и КАТАЛОГИ
- Основы технологии AJaX
- Манифест Хакера


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]