20 Impressive jQuery Plugins to Replace the HTML Select Box
The traditional HTML select element is not very powerful out of the box, it lacks in more substantive features. Today, the web demands controls with multiple features for a user-friendly experience and the traditional HTML select box just can’t compete. Features like multi-select, grouping, hierarchical lists, and custom HTML markup make light work of projects and tasks, and the HTML Box lacks these features.
Writing your own implementation for these features will require a lot of effort, and testing browser compatibility can be a nightmare. Luckily, jQuery offers lots of plugins to save you from that hassle. This post has a compiled list of 20 impressive jQuery plugins to replace the traditional HTML select box with a sleek, stylish and feature-rich select box. These jQuery plugins offer various features like changing default styles, adding search functionality, grouping the items, creating hierarchies, keyboard navigation, multiple item selection and many other features.
1. Pretty Dropdowns
https://github.com/thdoan/pretty-dropdowns
Pretty Dropdowns is a simple, lightweight jQuery plugin that converts <select> drop-down menus into “pretty†menus that you can skin using CSS. It features:
- Two arrow styles and sizes to choose from (or add your own style)
- Easily add icons, thumbnails, and other custom HTML to the menu items
- Support for multiple-select lists
- Support for option groups
- Tooltips (title) carried over at select, option, and optgroup levels
- Full keyboard navigation (you can even go directly to a menu item by typing its text!)
- Auto-linked to label (menu will get focus when you click on the label)
- Accessibility (it plays nicely with screen readers)
- Sensibility (when you open the menu it does its best to keep the menu items within the viewport)
- Complete control over the look and feel of the drop-down menu by modifying prettydropdowns.css
2. SelectPick
http://project.zyy1217.com/selectpick/
SelectPick is a fast, simple, customizable, and lightweight jQuery plugin to customize the HTML drop-down box with custom styling. The beauty of this plugin is that it can be applied to any type of HTML, not necessarily just HTML select box. Features include:
- Possibility to bind to multiple types of HTML elements
- Customizable data sources
- Support for Ajax asynchronous access to data
- Providing options and labelling disable functions
- Dynamically setting selected items
- User style customization
3. InputPicker
https://github.com/ukalpa/inputpicker
InputPicker is a jQuery input plugin that converts an input text field into a filterable, multi-column dropdown select box. When initiated this plugin appends a div element below the input box and styles it with the help of default CSS classes. It supports both local data (data array) and removing data sources (JSON) via AJAX requests. The plugin also gives flexibility to developers to change the width and height.
4. Select2
Select2 is a jQuery replacement for traditional select boxes. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. It features:
- Over 40 languages and RTL support.
- Fully skinnable CSS built with Sass and an optional theme for the Bootstrap 3.
- Full extensibility to work exactly how you want it to
- Dynamic item creation
- Support for both modern and legacy browsers
5. Sweet Dropdown
http://sweet-dropdown.adepto.as/
Sweet Dropdown is a simple jQuery plugin which creates flexible and animated dropdowns in any direction with any kind of content. It also supports adding icons to select items as well as the option to apply dark or light themes for styling. This plugin works in all major browsers.
6. Awesome Select
https://github.com/prevwong/awesome-select
Awesome Select is a beautiful and customizable jQuery plugin for transforming the boring select tag into something beautiful and minimal, with animations inspired from Material Design. You are free to change the way the dropdown looks based on your own taste. This plugin also supports immersive mode, which allows you to render the dropdown in a modal window covering the complete screen. The animations are based on CSS3 transform and transition properties.
7. jQuery Dropdown
https://github.com/daneWilliams/jquery.dropdown
jQuery Dropdown is a flexible and cross-device jQuery plugin for replacing HTML selects and multi-level menus with animated select dropdowns. This plugin allows you to create simple, multiple select, nested, grouped and custom HTML content dropdowns. The plugin allows you to override default settings for animation, keyboard navigation, multiple item selection and other default settings.
8. Combo Select
https://github.com/PebbleRoad/combo-select
Combo Select is a jQuery plugin that converts a select box into a searchable and keyboard-friendly interface. The plugin creates a div element and styles it using the default CSS. It also attaches the keydown event to capture key strokes for filtering the select. The other advantage of this plugin is that it falls back to native select on mobile and iPad devices. It features:
- Search and filter, select items
- Mobile- and tablet-friendliness (fall-backs to native select)
- Keyboard accessibility
- Ease of style
- Data attribute support
- Support for both numeric and string data types in select
- Support for implicit style attributes
9. Fuzzy Dropdown
https://github.com/zeusdeux/fuzzy-dropdown
Fuzzy-dropdown is a jQuery plugin that converts a select box into a fuzzy searchable dropdown. Fuzzy string matching is a technique for finding strings that match a pattern approximately rather than exactly. Fuzzy-dropdown delegates interactions to the underlying select box. Also, the dropdown is fully navigable via arrow keys. Fuzzy-dropdown by itself does no styling. All the styling is controlled via CSS. This gives you complete freedom to style your dropdown however you want.
10. DDList
http://code.cwwonline.be/serviceddlistjquery
DDlist is a lightweight jQuery plugin that allows you to create a stylish dropdown list supporting list options with text, images, and additional description strings. This plugin hides the select element and the list is 'reconstructed' by means of a jQuery-generated <ul> list inside a <div> container. The select element options can also be defined via a JSON array object. The plugin comes with a CSS file that contains various classes to present the internal elements and their styles, giving you the option to modify the existing style to match with your website design.
11. ddSlick
http://designwithpc.com/Plugins/ddSlick
Ever wanted a dropdown with images? Well, you now have a plugin for that! ddSlick is a free and lightweight jQuery plugin that allows you to create a custom dropdown with images and descriptions.
- Adds images and descriptions to otherwise bland drop downs
- Allows JSON to populate the drop down options
- Converts your HTML select element to ddSlick
- Uses Minimum CSS and no external stylesheets to download
- Supports call-back functions on selection
12. Dropdown Checkboxes
https://github.com/creativecirclemedia/dropdown-checkboxes
Dropdown checkboxes is a simple jQuery plugin that turns a bootstrap dropdown component into a compact multi-select dropdown list with checkboxes. This plugin creates a hidden input element. When the values are checked and saved, the plugin creates a JSON array of all checked values and assigns the same to the hidden input box. This plugin also allows you to pre-check the checkboxes on page load. When the selected checkbox's text values goes beyond a certain length, then the plugin truncates the string value for better UI arrangement.
13. Hierarchy Select
https://github.com/NeoFusion/hierarchy-select
Hierarchy Select is a lightweight jQuery plugin which converts the Bootstrap dropdown into a filterable dropdown list. This plugin works well for simple dropdowns and also for hierarchical dropdown, both with the option to search. You need to define an input element just above the select element. The plugin makes use of this input element to create search functionality for the select box. It attaches a keyup event to the input box and responds to keyboard interaction. For searching the text, it makes use of the indexOf() function which returns the position of the first occurrence of a specified value in a string.
14. Selectric
Selectric is a fast, simple, and light jQuery plugin designed to help in stylizing and manipulating traditional HTML selects elements. It also allows you to select multiple elements and add icons to select list items. It features:
- Keyboard navigation (Up/Down/Left/Right/Word search)
- Easy customization
- Permanently visible options box
- Independence from external libraries (besides jQuery)
- Word search compatibility with western Latin characters set
- 10 built-in themes
- The ability to dynamically add items to select the element
- Support for various callbacks for customizable handling
- Options to populate the data via Ajax
- Support for custom HTML markup
15. Sumo Select
http://hemantnegi.github.io/jquery.sumoselect/
Sumo Select is a beautiful and cross-device jQuery plugin that progressively enhances an HTML Select Box into a Single/Multiple option dropdown list. The dropdown list can be fully customizable using simple CSS. It can adapt itself according to any device, keeping the User Experience unbroken. It features:
- Single and Multi-select options
- Search support
- Optgroup support
- Localization support
- Full customization by simple css
- Support for almost all devices
- Intelligent rendering according to device
- Rendering native Single/Multiple pop-ups on Android, iOS, Windows and other devices
- Custom postback data format
- Selected, Disabled, Select All, keyboard navigation and Placeholder support
- A redesigned UI (No external icons are used now and the color scheme can be controlled by CSS)
- Easy extendability to allow developers to create new widgets
16. Fast Select
http://dbrekalo.github.io/fastselect/
Fastselect is a lightweight plugin for enhanced select elements based on jQuery. It enables responsive, fast, and sensible UI upgrades of selected elements with features like option searching and remote dataset loading. It weighs less than 5KB (minified and gzipped). It provides features like searching, filtering, tagging, single-select, multi-select, autocomplete, and dynamic AJAX content.
17. Selectize
http://selectize.github.io/selectize.js/
selectize.js is a lightweight plugin for creating a solid and user-friendly select list with clean and powerful APIs. It's useful for tagging, contact lists, country selectors, and so on. It clocks in at around ~7kb (gzipped). It features:
- Skinnability - Comes with LESS stylesheets and shims for Bootstrap 2 and Bootstrap 3.
- Clean API, code, and extensibility
- Smart Ranking / Multi-Property Searching & Sorting - Options are efficiently scored and sorted on-the-fly
- Caret between Items - Use the left and right arrow keys to move between items
- Select and delete multiple items at once
- RTL supported - Great for international environments
- Item Creation - Allow users to create items on the fly
- Remote Data Loading
18. Light Weight Select
https://github.com/keyo321/jQueryLightWeightMultiSelect
This is a super lightweight jQuery plugin that converts a multi-select drop menu into a simple two panel selection interface. The UI is completely controlled via CSS, so you can change the look and feel according to your needs. The plugin size is 4kb after minification, 2kb for the CSS and 2kb for the double arrow icon.
19. BetterSelecter
https://github.com/BenMMcLean/BetterSelecter
BetterSelecter is a simple, clean and easy to use jQuery plugin for converting the standard HTML select box into a stylish and sleek searchable select box. The styling is controlled via CSS classes which gives you flexibility to change the design per your requirements. This plugin appends a div element with a span inside to create a searchable select box and display the selected value.
20. SelectMe
https://github.com/bschueller/jquery.selectMe
selectMe is a jQuery-based select replacement plugin that replaces the large select element into a neat and searchable solution. It can also add a checkbox or radio button to the items for a better way of selecting the item. It supports:
- Search for specific elements
- Selecting or unselecting all elements which are currently shown
- Show only selected elements
- Optgroups
- Navigating through elements with arrow keys (up + down)
- Selecting elements via space key
- Jumping directly to the search field when pressing a key while navigating in the dropdown
Conclusion
These lightweight and customizable jQuery plugins allow you to turn the normal HTML select elements into stylish and sleek select elements. These plugins offer various powerful features like searching, grouping, custom HTML markup, keyboard navigation, remote data loading, RTL support, multiple item selection, and other small but handy features. The other advantage is that all the plugins use simple CSS classes to style the select elements. This gives flexibility to the developers to override or change the default plugin style to your own style implementation.
