Суть данного скрипта состоит в том, что у нас есть поле со списком, из которого мы выбираем пункт, жмем на кнопку и переходим по ссылке. Давайте сделаем.
Для начала напишем код функции перехода:
Код скрипта готов, теперь создаем простую форму
Как видите в Google мы добавили параметр target=»newwin», благодаря которому, при переходе по ссылке Google будет открыт в новом окне, при переходе по остальным ссылкам, они будут открываться в том же окне, выбирайте сами, что вам больше подходит.
Существует еще один вариант перехода по ссылке, когда вы переходите сразу после выбора элемента из списка. Ну что ж, реализуем и этот вариант. В принципе код мало отличается от предыдущего, изменяется лишь событие OnClick на OnChange
лабораторные работы и задачи по программированию и информатике, егэ по информатике
Содержание
- Событие javascript onresize объекта window
- Объект javascript выпадающий список — select
- Объект javascript option — пункт меню
- Свойства outerHTML и innerHTML в javaScript
Событие javascript onresize объекта window
Событие onresize объекта window ответственно за изменение размеров окна браузера. Поэтому событие и принадлежит объекту окно — window .
Поскольку среди элементов html нету тега, отождествленного с окном браузера, то обработать в javascript событие onresize можно при помощи присваивания функции свойству объекта window.
Рассмотрим на примере:
window.onresize = message; function message()
window.onresize = function message()
HTML-код:
пожалуйста, измените размер этого окна.
Объект javascript выпадающий список — select
Объект select — выпадающий список — предоставляет список значений для выбора. Выбор может быть как одного пункта, так и нескольких пунктов сразу. Это сложный объект, обращение к которому в скрипте происходит и как к объекту select , и как к его пункту option .
Свойства объекта select:
- length — количество пунктов списка
- name — атрибут name
- options[] — массив пунктов
- selectedIndex — индекс выбранного пункта option
- defaultSelected — выбранный пункт option по умолчанию
- selected — выбранный пункт
Получить значение выпадающего списка (select) в javascript можно через свойство value . Но есть и другие способы.
Идентификация значения списка:
- Добавьте текстовое поле и список select с четырьмя пунктами option с текстом.
- В открывающий тег select добавьте обработчик события onchange .
- Отождествите обработчик события onchange с функцией, изменяющей текст в текстовом поле (в текстовое поле поместите значение выбранного пункта меню).
Рассмотрим пример использования свойства объекта select — selectedIndex — выбранный пункт option:
В данном примере при изменении пункта меню генерируется событие onChange . В качестве значения атрибута onChange выполняется скрипт: происходит обращение к текстовому полю через массив элементов формы (текстовое поле — это первый элемент массива, т.к. 0-й элемент — это выпадающий список select). В качестве значения текстового поля указывается номер выбранного пункта списка ( selectedIndex ).
Объект javascript option — пункт меню
Пункт меню select в javascript — option — рассматривается как отдельный объект со своими свойствами:
- text — строка текста, которая размещается в контейнере LI
- value — значение, которое передается серверу при выборе альтернативы, связанной с объектом OPTION
- selected — альтернатива выбрана(true/false)
Доступ к конкретному пункту меню происходит через коллекцию (массив) options:
Рассмотрим пример использования свойства text объекта option:
Рассмотрим еще одно решение с использованием списка множественного выбора:
Свойства outerHTML и innerHTML в javaScript
innerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента.
Рассмотрим выполненный пример:
outerHTML в javaScript — это директива для формирования или замены содержимого какого-либо элемента вместе с самим элементом.
Пример:
Объект SELECT, в языке JavaScript, используется для создания раскрывающегося списка с единичным или множественным типом выбора опций.
Мы рассмотрим примеры скриптов для обращения к свойствам и методам SELECT и работу с обработчиком события SELECT onChange() .
Что бы получить значение value или text выбранного элемента необходимо использовать свойство SELECT selectedIndex которое возвращает число (не путайте его со значением value) обозначающее порядковый номер выбранного элемента, нумерация начинается с нуля.
Если ни один из элементов не выбран будет возвращено число -1 (минус один).
У объекта SELECT есть объект OPTION методы которого используются для получения значения текстовых меток text и значения value любого из элементов списка SELECT.
Учтите, что у объекта SELECT нет свойств select text и select value поэтому, к этим значениям необходимо обращаться через массив OPTION.
Обращение происходит так:
Что бы изменить значения text или value элемента списка к нему так же обращаемся через массив OPTIONS:
Теперь мы можем написать функцию, для получения значений выделенного элемента и их вывода в модальном окне alert():
Учитывайте, что при отправке данных формы на сервер отправляется значение value выбранного элемента.
Напишем функцию которая при загрузке страницы сделает текущим указанный элемент списка SELECT с помощью метода selected объекта options. После выполнения кода текущим станет элемент с value=7 .
Теперь рассмотрим обработчик события SELECT onChange() он срабатывает только если будет выбран другой элемент отличный от текущего.
Напишем функцию Size() которая покажет количество элементов списка используя свойство SELECT length (счёт ведётся с нуля), а затем очистит список SELECT удалив все его элементы. И поместим эту функцию в обработчик события onChange():
Рассмотрим некоторые из атрибутов SELECT которые указаны в стандарте the Option Element
Атрибут disabled делает неактивным список SELECT запрещая или разрешая выбор элементов.
Что бы запретить выбор select его свойство disabled — необходимо установить в положение true делается это так:
Что бы разрешить вновь выбор, если он был запрещён, устанавливаем select disabled в положение false:
Иногда бывает необходимо узнать в каком положении атрибут select disabled и доступен ли список для выбора.
Для этого:
если список не доступен для выбора будет возвращено значение атрибута true если доступен false
Весь пример работы с SELECT выглядит так:
Источник: