Примітка: через різні способи вибору кількох елементів та додаткового сповіщення користувачів про доступність вибору кількох варіантів, рекомендується замість розкривного списку використовувати прапорці.

Name: Визначає ім'я для списку, що розкривається. Воно може бути використане для доступу до даних форми після її відправки або для посилання на елемент JavaScript. size: Вказує кількість видимих ​​варіантів у списку, що розкривається. Якщо значення атрибута size більше 1, але менше загальної кількості варіантів списку, то браузер автоматично додасть смугу прокручування, щоб вказати, що є варіанти для перегляду.

Тег option HTML використовується для створення списку, за допомогою якого користувач може вибрати один варіант із заздалегідь визначеного набору значень.

Текст, видимий користувачеві, може відрізнятись від тексту, вказаного в атрибуті value . Ось, як можна створити список, що випадає:

Green Yellow Black

• Список, що випадає, створюється за допомогою тега ;
  Усередині тега
  визначаються варіанти вибору за допомогою тега ;
• У тезі можна використовувати атрибут value , щоб отримати доступ до вибраного варіанта з допомогою PHP, JS , Jquery і т.д.

Також можна задати клас CSS замість того, щоб використовувати ідентифікатор для визначення стилю списку, що випадає.

У наступному розділі я покажу приклади використання списку HTML у JavaScript / JQuery . У прикладах також буде показано, як ставити стилі з допомогою CSS/ CSS3 та фреймворк Bootstrap.

Приклад створення простого списку

В цьому приклад HTML select option використовується для створення списку з трьома варіантами на вибір:

У наведеному вище прикладі для створення списку, що випадає, використовується наступна розмітка:

5 10 15 20 25

Використання атрибуту value

Як згадувалося раніше, значення атрибуту value може відрізнятись від тексту, що виводиться на сторінці. Наприклад, можна вивести для користувачів назви країн або кольорів, а в атрибуті значення використовувати шорткоди.

У наступному прикладі ми створимо список, що випадає з атрибутом value :

Переглянути онлайн демо-версію та код

Для тега використовується наступний код:

Maroon Green Yellow Blue Red

Приклад отримання доступу до вибраного варіанту JavaScript

Тепер створимо приклад отримання доступу до значення вибраного варіанта та виконання деяких дій. Той самий список, що й у наведеному вище прикладі, ми створюємо з варіантами вибору кольору. Після вибору натисніть кнопку, щоб застосувати цей колір до документа:

Переглянути онлайн демо-версію та код

Для option value HTML використовується наступний код:

Maroon Green Yellow Blue Red Інші

Наступний рядок коду використовується в JavaScript, щоб отримати доступ до значення атрибуту value варіанта :

var seltheme = document.getElementById(“selcolor”).value;

При натисканні кнопки викликається функція JS , яка присвоює вибране у списку змінної. Це значення використовується для застосування кольору до поточного документа.

Доступ до видимого тексту в JQuery

Цього разу я використовуватиму JQuery , щоб отримати доступ до значення вибраного варіанта: як до тексту, так і до value . У цій демо-версії я отримуватиму доступ до видимого тексту в тезі option в HTML:

Переглянути онлайн демо-версію та код

У коді для кожного варіанта у тезі

Значення відрізняється від тексту. Після вибору кольору jQuery відображає видимий текст у попередженні. Код тега наступний:

Maroon Green Yellow Blue Red

Ось як забезпечується доступ до цього значення HTML select option selected JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Також можна отримати доступ до значення за допомогою JQuery-методу $.val() :

var selectedcolor = $("#jqueryselect").val();

Замініть цей рядок у наведеному вище прикладі, і код відображатиме шорткод / ​​значення кольору в атрибуті value , а не видимий текст.

Приклад отримання значення у скрипті PHP

У цьому прикладі отримання значення вибраного зі списку варіанта форма створюється за допомогою тега у розділі розмітки. Після вибору кольору зі списку натисніть на кнопку “Submit ”. Дані форми будуть передаватися в той же PHP-файл, після чого з'явиться вибраний колір:

Переглянути онлайн демо-версію та код

Метод форми, що використовується в прикладі - POST, тому можна отримати значення форми за допомогою масиву PHP$_POST[“”] . Це код форми, який використовується в прикладі:

Select A Color:

Maroon Green Yellow Blue Red