Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи

Архив

Select javascript.

Как и любые другие элементы форм, JavaScript позволяет программировать выпадающие списки - Select.

Обработка Select в JavaScript.

Здесь мы поговорим об основных аспектах програмирования выпадающих списков (Select javascript).

Основными элементами выпадающих списков являются, собственно, сами элементы списка, которые пользователь может выбрать – option. JavaScript позволяет создавать и удалять элементы списков в реальном времени:

 

 

<script>
function res()
{
document.f0.s0.options[0] = new Option("Первый вариант","",true,true);
document.f0.s0.options[1] = new Option("Второй вариант");
document.f0.s0.options[2] = new Option("Третий вариант");
return false;
}

</script>
<FORM NAME=f0>
<SELECT NAME=s0>
<OPTION>
Первый вариант
<OPTION>
Второй вариант
<OPTION>
Третий вариант
</SELECT>
<INPUT TYPE=button VALUE="Удалить последний вариант" onClick="document.f0.s0.options[document.f0.s0.length – 1]=null;">
<INPUT TYPE=button VALUE="Восстановить элементы списка" onClick="res();">

</FORM>

 

 

Рассмотрим данный пример более детально. Для начала мы создаем простую форму, состоящую из выпадающего списка и нескольких кнопок. Не думаю, что этот момент может вызывать у вас какие–либо трудности. Созданный нами список состоит из 3х полей.

Затем мы создаем кнопку, которая позволит нам удалять эти поля:

 

onClick="document.f0.s0.options[document.f0.s0.length – 1]=null;"

 

Для удаления последнего поля мы используем обработчик события клика мышью – OnClick. Далее мы обращаемся к нашему списку при помощи стандартной модели DOM JavaScript:

 

document.f0.s0

 

Выбираем метод options[] для работы с элементами списка:

 

document.f0.s0.options

 

Теперь вся работа будет вестись только с элементами выбранного нами списка. Обращаемся к свойству length, которое позволит нам определить количество элементов выпадающего списка:

 

document.f0.s0.length

 

И уменьшаем его на 1.

Результаты действия нашего скрипта должны быть присвоенны некоторой переменной, но нам не требуется никаких переменных для обработки данного события, поэтому приравниваем все действие к пустому типу Null:

 

document.f0.s0.options[document.f0.s0.length – 1]=null;


selectedIndex

Для того чтобы определить, какой из вариантов выпадающего списка был выбран используется свойство selectedIndex:

 

<FORM name=f4>
Вариант:
<SELECT NAME=s0 onChange="document.f4.elements[1].value=selectedIndex+1;">
<OPTION>
Один
<OPTION>
Два
<OPTION>
Три
</SELECT>
Было выбранно число:
<INPUT SIZE=1 maxlength=1>
</FORM>

Вариант: Было выбранно число:

 

 

В текущем примере мы использовали обработчик события изменения состояния – OnChange. При выборе любого элемента списка происходит срабатывание этого события и управление переходит к нему. Затем, используя свойство selectedIndex, мы получаем индекс выбранного поля, начиная с 0. Прибавляем к полученному индексу 1 и получаем то число, которое было выбранно. Остается только присвоить его свободному текстовому полю.

В данном примере важно понять, что свойство selectedIndex возвращает не значение выбранного поля, а только его индекс начиная с 0.

 

назад
далее
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам
Политика конфиденциальности | Пользовательское соглашение