Выпадающий список 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 - пример

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

Посмотреть онлайн демо-версию и код

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

<select id="selectvalue">

<option>5</option>

<option>10</option>

<option>15</option>

<option>20</option>

<option>25</option>

</select>

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

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

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

Посмотреть онлайн демо-версию и код

Для тега <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

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

Посмотреть онлайн демо-версию и код

Для 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:

Посмотреть онлайн демо-версию и код

В коде для каждого варианта в теге <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-файл, после чего отобразится выбранный цвет:

Посмотреть онлайн демо-версию и код

Метод формы, используемый в примере - 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:

<?php

if( $_POST["selphp"] != "" )

{

echo "You selected the following color:<strong>". $_POST["selphp"]."</strong>";

}

?>

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

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

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

Посмотреть онлайн демо-версию и код

Вместе с 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, чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:

Посмотреть онлайн демо-версию и код

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

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

Посмотреть онлайн демо-версию и код

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

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

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

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

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

Посмотреть онлайн демо-версию и код

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

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

Посмотреть онлайн демо-версию и код

Вадим Дворниковавтор-переводчик статьи «HTML select dropdown: Learn to Create and style with CSS»