Выпадающий список 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 - пример
- Использование атрибута value
- Пример получения доступа к выбранному варианту в JavaScript
- Получение доступа к видимому тексту в JQuery
- Пример получения значения в скрипте PHP
- Определение стилей выпадающего списка с помощью CSS
- Закругленные углы с помощью свойства border-radius
- Использование нескольких атрибутов и стилей CSS
- Использование фреймворка 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:
Посмотреть онлайн демо-версию и код