Javascript на что лучше заменить select

10 Best Dropdown Plugins To Replace The Native Select Box (2023 Update)

The native <select> element let’s developers create a basic dropdown component for a list of preset options such as lists, menu items, etc.

With the development of web technology and the improvement of users’ aesthetic level.

The original styling of the <select> element is might NOT suitable for modern web development and design.

Applying your own styles to the ugly select element is not a simple task for beginners.

This is why I listed here the 10 best JavaScript and/or jQuery plugins that help you create advanced, customizable dropdown lists and dropdown menus to replace the native select box without any CSS/HTML/JS skills. Have fun.

Originally Published Oct 13 2019, updated Jan 17 2023

See Also:

Table of contents:

jQuery Dropdown Plugins:

Select Boxes Replacement Plugin For jQuery — select2

A JavaScript based select box replacement to create dynamic, AJAX-enabled, customizable dropdown select on the web app.

jQuery Plugin For Filterable Bootstrap Dropdown Select — Bootstrap Select

A jQuery plugin to enhance the default Bootstrap dropdown select with multiple options like: optgoup support, auto-completion, clear selection and live filtering.

Easy Drop Down Select List Plugin — DropKick

A fast jQuery/JavaScript plugin that turns a standard html select box into a clean and skinnable drop down list that supports native keyboard navigation and dynamic selects.

Customizable & Animated Dropdown Plugin — Nice Select

Yet another jQuery (Vanilla JavaScript) select replacement plugin that turns your native html select boxes into customizable and CSS3 animated dropdown lists with one JS call.

Animated & Cross-Device jQuery Select Box Replacement — sumoselect

A jQuery select replacement plugin which turns the native select box into a responsive, animated, fully customizable dropdown select list.

Vanilla JavaScript Dropdown Plugins:

Customizable Select Box & Input Field Enhancement Library

A vanilla JavaScript plugin which converts the normal select and input into customizable select inputs with multi select and autocomplete support. Great for creating multi-select tagging systems.

Easy Customization Of HTML Select Boxes – nice-select2

A pretty nice select box replacement library that converts the regular select element into an animated, customizable, searchable dropdown list.

High Performance Select Box JavaScript Library – Virtual Select

A high-performance, Material Design style select box replacement that supports single/multiple select, virtual scrolling (for larger data lists), live search, and dynamic data rendering.

Custom Single/Multi Select In Pure JavaScript – vanillaSelectBox

A Vanilla JavaScript library that transforms the regular select element into a customizable, searchable, checkable dropdown list.

Popup Option Picker With Vanilla JavaScript – pickout

A Vanilla JavaScript library to enhance the default select box that allows you to select an option from a popup box. Also supports option filtering.

Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Dropdowns on the web & mobile? Check out the jQuery Drop Down and JavaScript Dropdown sections.

Нативные Select’ы на любой вкус.

В данной статье предлагаю поговорить о кастомной стилизации инпута селекта (<select>) в виде кнопки.

Вступление

Современные браузеры предлагают нативные реализации достаточно большого количества инпутов, это type=date, type=month, type=email и множество других. Многие из них были добавлены “относительно” недавно. Но в html существует такой долгожитель как <select>, который предоставляет выбор значения из выпадающего списка.

Как правило, селект выглядит как инпут с иконкой. По нажатию на данный элемент появляется системное выпадающее меню. В чем прелесть нативного селекта? Нативный селект на мобильных ОС предлагает удобный и понятный пользователю кейс. Например, селект для iOS представляет собой “барабан”, а для Android — попап с пунктами для выбора. В то же время для практически всех desctop’ных ОС такой селект выглядит невзрачно (как обычный выпадающий список). Поэтому зачастую данный элемент управления разработчики пытаются стилизовать полностью кастомно, и от этого могут страдать пользователи мобильных платформ. В HeadHunter было принято волевое решение — стилизовать все простые селекты только на уровне визуального инпута, а выбор нужного пункта оставить за нативной системной реализацией. (под простыми селектами — здесь понимаются селекты, которые предполагают выбор только одного варианта, без мультивыбора, поиска и т.п.)

Сам по себе селект стилизовать не так сложно, например, селект, который входит в “библиотеку общих компонент HH” — bloko, выглядит таким образом:

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

Такие селекты предназначаются для выполнения действия — “выбор варианта”. Данный элемент управления по UX не предполагает дальнейшего действия после выбора. Для совершения некоторого действия необходимо использовать элемент управления “кнопка”. Однако, что делать, если при клике на кнопку необходимо открыть подобный выпадающий список?

Проблема

Таким образом, появилась необходимость стилизовать нативный селект как кнопку.

(решение для нетерпеливых — http://jsbin.com/qobado/edit?html,css,output . Описание решения в разделе “Заход #3”)

Какие отличительные черты кнопки от селекта? Кнопка не имеет иконки выпадающего списка справа, текст у кнопки, как правило, центрируется по середине.

Поиск решения

Контрол <select> не предполагает использования по типу “кнопка” по умолчанию и не поддерживает выравнивание текста любым отличным способ от “слева” (есть свойство text-indent, но оно не гарантирует выравнивание текста по центру). Таким образом, главной задачей стал поиск решения выравнивания текста.

Заход #1 Labels

Первой попыткой стала стилизация label как кнопки и работа с select через связку id-for:

Данный способ мог бы оказаться наиболее подходящим, если бы не критическая проблема — клик на label не открывает select :-/

Заход #2 JS

Вторая попытка — решить проблему c помощью js:

На данном этапе было рассмотрено несколько подходов к решению:

1. Попытка стриггерить событие клика.
2. Попытка раскрыть список программно.

Данный эксперимент показал, что <select> не “обрабатывает” события ни клика, ни моделирования событий mousedown\mouseup или touchstart\touchend. “Раскрыть” список можно только изменив его аттрибут size, но это может нарушить существующую верстку страницы и не является выпадающим меню. Эксперименты с JavaScript выложил — http://jsbin.com/bevegotela/edit?html,js,output . Поэтому данный способ тоже потерпел неудачу.

Заход #3 “визуальный подмен”

Третьим способом, который я рассматривал, стал способ визуальной подмены. Для этого отображаем обычную кнопку, при этом поверх кнопки устанавливаем <select>.

Шаг 1: определяем кнопку, не забывая задать значения для :hover и :active

Теперь создаем новый блок — select-button. Он будет состоять из блока: select-button, модификатора для блока select-button_stretched (для растяжения на всю ширину) и элемента — селекта select-button__select:

Самой важной строкой в данном коде является 24 строка — opacity: 0.

Представляем нашу html структуру следующим образом:

Итак, в чем состоит данный подход? Мы создаем блок select-button, который отображается как position:relative, внутрь этого блока инкапсулируем блок button и элемент .select-button__select, который с помощью абсолютного позиционирования “накрывает” .button по всему размеру, физически “закрывая” кнопку. Opacity: 0, в свое время гарантирует, что пользователь будет видеть только кнопку. Такой подход позволяет решить задачу стилизации селекта как кнопки.

Однако, у данного подхода есть свои минусы. Перечислим их:

1. Кнопка потеряла стили для :hover и :active state, так как на самом деле пользователь делает :hover и :active с селектом.
2. Табуляция идет как по селектам, так и по кнопкам. Причем клик на кнопку ничего не дает.

Попробуем разрешить и эти проблемы:

Создадим микс select-button__button для кнопки и определим его поведение:

Таким образом, нами будет решен вопрос :hover для кнопки. :active же решать не надо, так как при клике на кнопку будет отображен select, и кнопка в любом случае не сможет быть в состоянии :active.

Остается последняя проблема — работа с :focus. Данную задачу выполним в несколько шагов:

1. Запрещаем табуляцию по кнопкам, добавляем tabindex=”-1"
2. Переносим в html структуре select перед button. Выставляем для button (при помощи элемента .select-button__button) z-index: 1, а для .select-button__select: z-index: 2
3. При помощи селектора .select-button__select:focus + .select-button__button задаем стили для :focus. Например, в моем случае, это может быть border-color: #0c59a7;

Браузерная поддержка

Данный код достаточно прост и поэтому работает корректно во всех браузерах, которые поддерживают “стилизацию” селекта как такового. Все современные браузеры работают с данными селектами корректно. Если рассматривать браузеры “постарше”, то проблемы возникают с IE9-. Это происходит по причине, что данные браузеры не позволяют стилизовать селект. Чтобы обработать данный случай достаточно добавить стили для “старых” браузеров, которые расширят селект по высоте (чтобы был равен кнопке). Таким образом, селект займет все необходимое пространство и пользователи старых браузеров не получат проблем с функционалом.

Данный юзкейс может быть применен в таких местах, когда по нажатию на кнопку пользователю необходимо предоставить “диалог” уточнения своего выбора. Например, запрос на выбор города для того, чтобы затем не просто “отобразить” город в селекте, но и изменить “состояние” приложения. В случае с городом, это может быть добавление города в список городов.

Javascript на что лучше заменить select

Часто дизайн требует стилизовать селект. Лучшим решением было бы стилизовать только контейнер, а его options оставить стандартными.

Если такой подход не устраивает, то необходимо делай свой.
Из готовых решений есть:
— Select2 на jQuery;
— Chosen тоже на jQuery;
— Choices на JavaScript без зависимостей.

Здесь мы попробуем сделать свое.

Добавим селект с вариантами. Сам атрибут data-custom-select-class даст нам понять, что этот селект нужно стилизовать, а его значение — какой класс использовать в новой разметке.

JavaScript

Вот полный код скрипта, можете быстро пройтись по нему, чуть ниже будет детальный разбор

Также Demo можно посмотреть на codepen.

Ищем селекты

Constructor

1. WrapSelect

InsertBase

hideSelect

2. findElements

Функция сохраняет в instance все необходимые элементы.
Для наглядности продублирую createBaseHTML

Смотрим и соотносим элементы:

3. initEvents

Открытие/закрытие селекта

Читаем от нижней функции к верхней

onNodeClick

Т.к. мы делаем слушатель на весь документ, то он сработает даже тогда когда мы будем кликать на наш селект.
Чтобы такое не происходило — уберем всплытие.

Подробнее про это можно прочитать на learn.javascript.ru

4. render

renderOptions

initOptionsEvent

isOption и shouldDropdown

pickOption

hideDropdown

Это функция hideOptions, записанная в instance. Смотри выше.

Это всё. Если какой-то момент оказался не понятным — пишите в комментарии — попробую разъяснить, а также смотрите демо в codepen.

Обзор jQuery-плагинов для стилизации селектов

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

Не секрет, что стандартные селекты имеют крайне слабый уровень стилизации средствами CSS. В каком-то браузере они чуть лучше, в каком-то чуть хуже, но общая картина складывается весьма грустной. Как обычно, там, где не справляется чистый HTML+CSS, на помощь приходит jQuery.

Плагинов для замены селектов действительно довольно много, однако все же хочется рассмотреть их поближе. В этой статье я хотел бы осветить особенности каждого из плагинов. Их количество действительно огромно, так что обзор не претендует на полноту (но самые основные плагины я разберу). Начём, пожалуй, с самого простого селекта.

Стандартный select

• работает на всех устройствах, в том числе на мобильных телефонах
• автоматически подстраивает ширину
• без проблем контролируется с помощью jQuery
• открывается всегда на видимую часть страницы (так называемое «умное позиционирование»)
• сам определяет оптимальную высоту для выпадающего списка
• позволяет группировать опции
• позволяет выделять сразу несколько пунктов (если, конечно, прописать необходимые атрибуты)
• реагирует на переход Tab’ом
• имеет подбор по первой букве
• поддерживает скролл колёсиком мышки

• выглядят во всех браузерах по разному
• не имеет возможности быть нормально стилизованным

Select Box Factory 2

• автокомплит
• поддерживает мультиселект
• поддерживает любую стилизацию любого поля (включая картинки внутри пунктов)

• jQuery 1.2.6+ (на jQuery 1.5.1 тоже работает)

• можно настроить как душе угодно

• при отключённых скриптах превращается в тыкву абсолютно бесполезен
• не подменяет селекты, а создает свою структуру div’ами
• сложно установливать и настраивать
• не имеет «умного» позиционирования
• имеет мультиселект (но на маках вместо того чтобы зажимать cmd, приходится жать shift)
• не реагирует на Tab

jQuery Searchable DropDown Plugin

• автокомплит

• jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

• имеет все достоинства страндартного селекта
• работает с отключенным js
• прост и понятен в настройке

• В IE6 автокомплит не работает так, как надо, хотя сам селект остается юзабельным.

jQuery Custom Select Box

• Можно настроить высоту, ширину, скролл, скорость и эффект открывания

• jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)

• очень прост в установке
• довольно легок
• имеет мультиселект

• нужен оборачивающий div
• не работает в IE6 (расползается по всей странице)

jQuery custom selectbox

• отключение плагина

• jQuery 1.2+ (на jQuery 1.5.1 тоже работает)

• имеет маленький объем
• прост в установке
• умеет плавно разворачиваться

• открывается только при клике на стрелочку
• не умеет группировать опции
• отсутствует возможность выделения сразу несколько пунктов
• не знает переключения стрелочками на клавиатуре
• не умеет задавать высоту выпадающего списка
• отсутствует «умное позиционирование»
• нажатие на Tab не знает
• не поддерживает IE6 (хотя совсем небольшая доработка CSS решает эту проблему)

jQuery Selectbox plugin

• Реализованы стандартные функции обычных селектов

• jQuery 1.4+ (на jQuery 1.5.1 тоже работает)

• прост в установке
• имеет кастомные эффекты появления

• не работает в IE6 и IE7
• если селект откажется внизу страницы, то вообще ничего не выпадет

jQuery SelectBox Plugin

• Реализованы стандартные функции обычных селектовов

• jQuery 1.4.4+ (на jQuery 1.5.1 тоже работает)

• очень прост в установке
• действительно кроссбраузернен
• предлагает очень классное описание плагина и «песочницу»
• обладает мультиселектом
• имеет подгруппы
• можно отключать опции
• автоподстраивает ширину
• реагирует на Tab
• реагирует на стрелки клавиатуры и скролл

• небольшие баги в IE6
• нет умного позиционирования

jquery.sb.js Selectbox Replacement

• Реализованы стандартные функции обычных селектовов
• Можно через alt вставлять любую разметку внутрь опций (втом числе картинки)

• jQuery 1.3.2+ (на jQuery 1.5.1 тоже работает)
• jquery.ba-throttle-debounce.min.js
• jquery.tie.js

• очень прост в установке
• есть мультиселект
• есть подгруппы
• можно отключать опции
• автоподстраивает ширину
• реагирует на Tab
• реагирует на стрелки клавиатуры
• реагирует на скролл

• не работает в IE6, просто оставляет стандартные
• не знает «умного позиционирования»
• тяжело пользоваться без стандартного описания

Плагины, которые на текущем этапе своего развития не достойны нашего внимания:

(без поддержки IE6 и IE7, при этом не остаётся стандартным) (не работает в IE6, просто оставляет стандартные, стилизирует только невыпадающую часть селекта) (не работает в IE6, глючит в FF и Safari)

Выводы

• Перед тем, как вы решите воспользоваться стилизированными селектами, обязательно оцените, точно ли вам это нужно.
• Обязательно протестируйте работу селектов при отключенном js. Это сэкономит вам кучу нервов, особенно если где-то в другом месте будет ошибка, и селекты не подгрузятся.
• Обязательно отключите всю эту красоту для мобильных бразеров, так как в них это выглядит уже не так красиво. Например у iPhone’ов очень удобно продуманы селекты. Для того, чтобы выбрать нужный пункт вовсе необязательно бесить пользователя зумом и прочими извращениями.
• Если вы всё-таки решитесь использовать стилизированные селекты на мобильниках, учтите — большинство из них не понимает overflow:scroll, то есть пользователь просто не увидет пунктов меню, к которым нужно скроллить (если плагин не выводит стандартный выпадающий список). Все остальные селекты на мобильниках годятся только для коротких списков, которым точно не потребуется скролл.
• Многие плагины используют float:left (в отличии от стандратных, которые можно вставить inline’ово). Конечно, любой плагин можно допилить для того, чтобы он вставлялся инлайново, но это потребует времени.

Данный обзор является пробой пера. Надеюсь, он будет полезен хабрасообществу. Приветствуются замечания и дополнения.

29 jQuery Select/Multiselect Boxes

Collection of free jQuery select/multiselect box code examples and plugins from Codepen, Github and other resources. Update of March 2021 collection. 1 new item.

Замена стандартных селектов в браузере

На текущем проекте некоторое время назад стала задача по унификации селектов во всех браузерах. Нужно было изменить их так, чтобы при одинаковом отображении они внешне оставались близкими к стандартным но при этом имели возможность гибкой настройки средствами CSS. Поискав готовые библиотеки, на тот момент ничего подходящего не нашел и решил сделать свой. Взял за отправную точку дизайн близкий к стандартному, плюс замена скроллбара, со стандартного системного на свой, также одинаковый во всех браузерах. Реализован скрипт в виде jQuery плагина. Требуемая версия jQuery – 1.5+.

Механизм работы такой:

• Стандартный селект полностью скрывается
• На его месте создается маркированный список, который заполняется элементами списка c атрибутом value, в котором хранится номер элемента option из селекта. Тем самым при клике на li, в соответствии с параметром в value, в скрытом селекте выбирается option.
• В том случае, если содержимое псевдоселекта больше, чем заданная видима область, то к списку добавляется скроллбар (так же jQuery плагин ScrollBar.js).
• Внешний вид скроллбара можно поменять в файле стилей selectimus.css, там же можно поменять изображение кнопок, для прокрутки вверх и вниз. (Опции для оформления скроллбара в разработке).

• Максимальная приближенность к стандартному, но одинаковому во всех браузерах, селекту, по умолчанию.
• Стилизация селектов с помощью css. Параметр style (Object) передается при инициализации.
• Дополнительная настройка с помощью добавления ширины, высоты и установка количества строк развернутого списка селекта.
• Навигация с помощью клавиатуры.

При инициализации плагина, если не переданы дополнительные параметры стилей, применяются стили по-умолчанию:

• color: ‘#000’,
• background: ‘#FFF’,
• color_up: ‘#FFF’,
• background_up: ‘#7EA0FA’,
• display: ‘inline-block’,
• ‘border-width’: ‘1px’,
• ‘border-style’: ‘solid’,
• ‘border-color’: ‘#b6b6b6’,
• ‘border-radius’: ‘5px’,
• margin: ‘3px 0’,
• position: ‘relative’,
• overflow: ‘visible’

Плагин scrollbarJS

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