Списки select javascript, отримання значень select value і select text, приклади роботи зі

Ми розглянемо приклади скриптів для звернення до властивостей і методів 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 виглядає так:

Вас також може зацікавити - створення пов'язаних або динамічних списків SELECT