Javascript получить значение select

Javascript получить значение select

Объект 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():

Читайте также:  Half life 2 episode 3 дата выхода

Рассмотрим некоторые из атрибутов SELECT которые указаны в стандарте the Option Element
Атрибут disabled делает неактивным список SELECT запрещая или разрешая выбор элементов.
Что бы запретить выбор select его свойство disabled — необходимо установить в положение true делается это так:

Что бы разрешить вновь выбор, если он был запрещён, устанавливаем select disabled в положение false:

Иногда бывает необходимо узнать в каком положении атрибут select disabled и доступен ли список для выбора.
Для этого:

если список не доступен для выбора будет возвращено значение атрибута true если доступен false

Весь пример работы с SELECT выглядит так:

Если требуется получить значение (value) выбранной опции в SELECT:

Если Вам необходимо получить индекс выделенного элемента в SELECT (нумерация начинается с нуля, как в массиве):

Если Вы хотите получить текст выбранной опции:

лабораторные работы и задачи по программированию и информатике, егэ по информатике

Событие 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 — выбранный пункт
Читайте также:  Android на нетбук asus eee pc

Получить значение выпадающего списка (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 — это директива для формирования или замены содержимого какого-либо элемента вместе с самим элементом.
Пример:

Ссылка на основную публикацию
Insomnia the ark цена свободы
Очередь просмотра Очередь Удалить все Отключить YouTube Premium Хотите сохраните это видео? Пожаловаться Пожаловаться на видео? Выполните вход, чтобы сообщить...
High speed hdmi cable with ethernet
Приветствую всех посетителей блога о компьютерах. Сегодня бы очень хотелось поведать читателям о так называемом HDMI кабеле, с помощью которого...
Highscreen pure j 4pda прошивка
Внимание! Использование инструментов для перепрошивки неопытными пользователями может привести к выходу аппарата из строя. Установка этого обновления приведет к полному...
Instagram как выложить фото с компьютера
Зачем нужно выкладывать фото и видео в Инстаграм через компьютер? Инстаграм придумали, чтобы можно было быстро загрузить фото с телефона....
Adblock detector