Select javascript.

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

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

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

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

</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.

Наверх

Источник: Создание сайтов