Выпадающий список в HTML: учимся создавать и задавать стили с помощью CSS

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

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

<select id="selectID"><option value=”GR”>Green</option><option value=”YE”>Yellow</option><option value=”BL”>Black</option></select>
  • Выпадающий список создается при помощи тега <select>;
  • Внутри тега <select> определяются варианты для выбора при помощи тега <option>;
  • В теге <option> можно без труда использовать атрибут value, чтобы приобрести доступ к выбранному варианту при помощи PHP, JS, Jquery и т.д.

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

В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery. В примерах также будет показано, как задавать стили <select> при помощи CSS / CSS3 и фреймворка Bootstrap.

Пример создания простого выпадающего списка

В этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

В приведенном выше примере для создания выпадающего списка используется следующая разметка:

<select id="selectvalue"><option>5</option><option>10</option><option>15</option><option>20</option><option>25</option></select>

Использование атрибута value

Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. К примеру, можно без проблем вывести для посетителей названия стран или цветов, а в атрибуте value использовать шорткоды.

В следующем примере мы создадим выпадающий список с атрибутом value:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

Для тега <select> используется следующий код:

<select id="selecttheme"><option value="Mar">Maroon</option><option value="Gre">Green</option><option value="Yel">Yellow</option><option value="Blu">Blue</option><option value="Red">Red</option></select>

Пример получения доступа к выбранному варианту в JavaScript

Сейчас создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

Для option value HTML используется следующий программный код:

<select id="selcolor"><option value="Maroon">Maroon</option><option value="Green">Green</option><option value="Yellow">Yellow</option><option value="Blue">Blue</option><option value="Red">Red</option><option value="White">Other</option></select>

Следующая строка кода используется в JavaScript, чтобы приобрести доступ к значению атрибута value варианта <select>:

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

При нажатии кнопки вызывается функцию JS, которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.

Получение доступа к видимому тексту в JQuery

На этот раз я буду использовать JQuery, чтобы приобрести доступ к значению выбранного варианта: как к тексту, так и к value. В данной демо-версии я буду приобретать доступ к видимому тексту в теге option в HTML:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и программный код

В коде для каждого варианта в теге <select> значение отличается от текста. После того, как вы выберете цвет, jQuery выводит видимый текст в предупреждении. Код тега <select> следующий:

<select id="jqueryselect"><option value="MAR">Maroon</option><option value="GRE">Green</option><option value="YEL">Yellow</option><option value="BLU">Blue</option><option value="RED">Red</option></select>

Вот как обеспечивается доступ к данному значению в HTML select option selected JavaScript:

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

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

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

Замените эту строку в приведенном выше примере, и код будет выводить шорткод / значение цвета в атрибуте value, а не видимый текст.

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

В этом примере получения значения выбранного из выпадающего списка варианта форма создается при помощи тега <select> в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit”. Данные формы будут передаваться в тот же PHP-файл, после чего отобразится выбранный цвет:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

Способ формы, используемый в примере — POST, так что можно без труда приобрести значения формы при помощи массива PHP $_POST[“”]. Это код формы, используемый в примере:

<form action="" method="post"><div class="seldemo"><label>Select A Color: </label><select name="selphp"><option value="Maroon">Maroon</option><option value="Green">Green</option><option value="Yellow">Yellow</option><option value="Blue">Blue</option><option value="Red">Red</option></select><p><input type="submit" value="Submit" class="btncls"></p></div></form>

А вот как PHP-скрипт используется, чтобы приобрести значение HTML select option:

<?phpif( $_POST["selphp"]!= ""){echo "You selected the following color:<strong>". $_POST["selphp"]."</strong>";}?>

Если в форме указан способ GET, тогда используйте PHP-массив $_GET[“”].

Определение стилей выпадающего списка при помощи CSS

Сейчас рассмотрим, как определить стили выпадающего списка <select>, используя функции CSS. В следующей демо-версии я использовал пару простых свойств CSS и свойства градиента CSS3:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

Вместе с linear-gradient здесь использовано свойство box-shadow. Полный код CSS выглядит следующим образом:

.selcls {padding: 3px;border: solid 1px #517B97;outline: 0;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF));background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;width:150px;}

Закругленные углы при помощи свойства border-radius

Для HTML select option мы зададим свойство CSS3 border-radius, чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями ввода и иными свойствами, как захотите:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

Использование нескольких атрибутов и стилей CSS

Чтобы дать посетителям функция выбирать из списка пару вариантов, необходимо использовать атрибут multiple. В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать пару вариантов, нажав клавишу CTRL:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и программный код

Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков

Если вы используете фреймворк Bootstrap, то у вас есть функция применять плагины для создания крутых option HTML .

Один из таких плагинов — Bootstrap-Select . Он добавляет для выпадающего списка полезные возможности. К примеру, можно без проблем выполнить поиск значения, вводя текст в поле ввода. Это особенно полезно, если в выпадающем списке много вариантов.

Кроме этого все выбранные варианты помечаются галочками, и можно установить лимит на число выбранных вариантов, используя атрибут multiple .

В приведенной демо-версии посетитель может выбрать два варианта из списка:

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и программный код

Демо-версия выпадающего списка с опцией поиска

Используя тот же плагин, можно предоставить посетителям функция искать нужные варианты в списке HTML select option :

Выпадающий список в HTML: учимся создавать и задавать стили при помощи CSS Посмотреть онлайн демо-версию и код

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *