Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее

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.