Home » Blog » 20 Impressive jQuery Plugins to Replace the HTML Select Box

20 Impressive jQuery Plugins to Replace the HTML Select Box

The normal HTML choose factor isn’t very highly effective out of the field, it lacks in additional substantive options. At present, the net calls for controls with a number of options for a consumer-pleasant expertise and the conventional HTML choose field simply can’t compete. Options like multi-choose, grouping, hierarchical lists, and customized HTML markup make mild work of tasks and duties, and the HTML Box lacks these options.
Writing your personal implementation for these options would require lots of effort, and testing browser compatibility is usually a nightmare. Fortunately, jQuery gives numerous plugins to prevent from that problem. This publish has a compiled listing of 20 spectacular jQuery plugins to substitute the conventional HTML choose field with a glossy, trendy and have-wealthy choose field. These jQuery plugins supply numerous options like altering default types, including search performance, grouping the gadgets, creating hierarchies, keyboard navigation, a number of merchandise choice and lots of different options.

1. Fairly Dropdowns

Pretty Dropdowns

https://github.com/thdoan/pretty-dropdowns

Fairly Dropdowns is an easy, light-weight jQuery plugin that converts drop-down menus into “pretty” menus you can pores and skin utilizing CSS. It options:

  • Two arrow sizes and styles to select from (or add your personal type)
  • Simply add icons, thumbnails, and different customized HTML to the menu gadgets
  • Help for a number of-choose lists
  • Help for choice teams
  • Tooltips (title) carried over at choose, choice, and optgroup ranges
  • Full keyboard navigation (you’ll be able to even go instantly to a menu merchandise by typing its textual content!)
  • Auto-linked to label (menu will get focus once you click on on the label)
  • Accessibility (it performs properly with display readers)
  • Sensibility (whenever you open the menu it does its greatest to hold the menu gadgets inside the viewport)
  • Full management over the appear and feel of the drop-down menu by modifying prettydropdowns.css

2. SelectPick

SelectPick

http://project.zyy1217.com/selectpick/

SelectPick is a quick, easy, customizable, and light-weight jQuery plugin to customise the HTML drop-down field with customized styling. The great thing about this plugin is that it may be utilized to any sort of HTML, not essentially simply HTML choose field. Options embrace:

  • Risk to bind to a number of forms of HTML parts
  • Customizable knowledge sources
  • Help for Ajax asynchronous entry to knowledge
  • Offering choices and labelling disable features
  • Dynamically setting chosen gadgets
  • Consumer type customization

three. InputPicker

InputPicker

https://github.com/ukalpa/inputpicker

InputPicker is a jQuery enter plugin that converts an enter textual content subject right into a filterable, multi-column dropdown choose field. When initiated this plugin appends a div aspect under the enter field and types it with the assist of default CSS courses. It helps each native knowledge (knowledge array) and eradicating knowledge sources (JSON) by way of AJAX requests. The plugin additionally provides flexibility to builders to change the width and peak.

four. Select2

Select2

https://select2.github.io/

Select2 is a jQuery alternative for conventional choose bins. Select2 provides you a customizable choose field with help for looking, tagging, distant knowledge units, infinite scrolling, and lots of different extremely used choices. It options:

  • Over forty languages and RTL help.
  • Absolutely skinnable CSS constructed with Sass and an optionally available theme for the Bootstrap three.
  • Full extensibility to work precisely the way you need it to
  • Dynamic merchandise creation
  • Help for each trendy and legacy browsers

5. Candy Dropdown

Sweet Dropdown

http://sweet-dropdown.adepto.as/

Candy Dropdown is an easy jQuery plugin which creates versatile and animated dropdowns in any path with any type of content material. It additionally helps including icons to choose gadgets in addition to the choice to apply darkish or mild themes for styling. This plugin works in all main browsers.

6. Superior Select

Awesome Select

https://github.com/prevwong/awesome-select

Superior Select is a fantastic and customizable jQuery plugin for reworking the boring choose tag into one thing lovely and minimal, with animations impressed from Materials Design. You’re free to change the means the dropdown appears based mostly by yourself style. This plugin additionally helps immersive mode, which permits you to render the dropdown in a modal window overlaying the full display. The animations are based mostly on CSS3 rework and transition properties.

7. jQuery Dropdown

jQuery Dropdown

https://github.com/daneWilliams/jquery.dropdown

jQuery Dropdown is a versatile and cross-system jQuery plugin for changing HTML selects and multi-degree menus with animated choose dropdowns. This plugin permits you to create easy, a number of choose, nested, grouped and customized HTML content material dropdowns. The plugin permits you to override default settings for animation, keyboard navigation, a number of merchandise choice and different default settings.

eight. Combo Select

Combo Select

https://github.com/PebbleRoad/combo-select

Combo Select is a jQuery plugin that converts a choose field right into a searchable and keyboard-pleasant interface. The plugin creates a div factor and types it utilizing the default CSS. It additionally attaches the keydown occasion to seize key strokes for filtering the choose. The opposite benefit of this plugin is that it falls again to native choose on cellular and iPad units. It options:

  • Search and filter, choose gadgets
  • Cellular- and pill-friendliness (fall-backs to native choose)
  • Keyboard accessibility
  • Ease of favor
  • Knowledge attribute help
  • Help for each numeric and string knowledge varieties in choose
  • Help for implicit fashion attributes

9. Fuzzy Dropdown

fuzzy Dropdown

https://github.com/zeusdeux/fuzzy-dropdown

Fuzzy-dropdown is a jQuery plugin that converts a choose field right into a fuzzy searchable dropdown. Fuzzy string matching is a way for locating strings that match a sample roughly quite than precisely. Fuzzy-dropdown delegates interactions to the underlying choose field. Additionally, the dropdown is absolutely navigable by way of arrow keys. Fuzzy-dropdown by itself does no styling. All the styling is managed by way of CSS. This provides you full freedom to type your dropdown nevertheless you need.

10. DDList

DDList

http://code.cwwonline.be/serviceddlistjquery

DDlist is a light-weight jQuery plugin that permits you to create a trendy dropdown record supporting listing choices with textual content, pictures, and extra description strings. This plugin hides the choose aspect and the record is ‘reconstructed’ via a jQuery-generated

    record inside a
    container. The choose component choices can be outlined by way of a JSON array object. The plugin comes with a CSS file that incorporates numerous courses to current the inner parts and their types, supplying you with the choice to modify the present fashion to match together with your web site design.

    eleven. ddSlick

    ddSlick

    http://designwithpc.com/Plugins/ddSlick

    Ever needed a dropdown with pictures? Nicely, you now have a plugin for that! ddSlick is a free and light-weight jQuery plugin that permits you to create a customized dropdown with photographs and descriptions.

    • Provides pictures and descriptions to in any other case bland drop downs
    • Permits JSON to populate the drop down choices
    • Converts your HTML choose factor to ddSlick
    • Makes use of Minimal CSS and no exterior stylesheets to obtain
    • Helps name-again features on choice

    12. Dropdown Checkboxes

    Dropdown Checkboxes

    https://github.com/creativecirclemedia/dropdown-checkboxes

    Dropdown checkboxes is an easy jQuery plugin that turns a bootstrap dropdown element right into a compact multi-choose dropdown record with checkboxes. This plugin creates a hidden enter factor. When the values are checked and saved, the plugin creates a JSON array of all checked values and assigns the similar to the hidden enter field. This plugin additionally permits you to pre-examine the checkboxes on web page load. When the chosen checkbox’s textual content values goes past a sure size, then the plugin truncates the string worth for higher UI association.

    thirteen. Hierarchy Select

    Hierarchy Select

    https://github.com/NeoFusion/hierarchy-select

    Hierarchy Select is a light-weight jQuery plugin which converts the Bootstrap dropdown right into a filterable dropdown listing. This plugin works nicely for easy dropdowns and in addition for hierarchical dropdown, each with the choice to search. You want to outline an enter factor simply above the choose component. The plugin makes use of this enter factor to create search performance for the choose field. It attaches a keyup occasion to the enter field and responds to keyboard interplay. For looking the textual content, it makes use of the indexOf() perform which returns the place of the first prevalence of a specified worth in a string.

    14. Selectric

    Selectric

    http://selectric.js.org/

    Selectric is a quick, easy, and lightweight jQuery plugin designed to assist in stylizing and manipulating conventional HTML selects parts. It additionally permits you to choose a number of parts and add icons to choose record gadgets. It options:

    • Keyboard navigation (Up/Down/Left/Proper/Phrase search)
    • Straightforward customization
    • Completely seen choices field
    • Independence from exterior libraries (apart from jQuery)
    • Phrase search compatibility with western Latin characters set
    • 10 constructed-in themes
    • The power to dynamically add gadgets to choose the component
    • Help for numerous callbacks for customizable dealing with
    • Choices to populate the knowledge by way of Ajax
    • Help for customized HTML markup

    15. Sumo Select

    Sumo Select

    http://hemantnegi.github.io/jquery.sumoselect/

    Sumo Select is a stupendous and cross-system jQuery plugin that progressively enhances an HTML Select Box right into a Single/A number of choice dropdown listing. The dropdown listing may be absolutely customizable utilizing easy CSS. It may adapt itself in accordance to any system, holding the Consumer Expertise unbroken. It options:

    • Single and Multi-choose choices
    • Search help
    • Optgroup help
    • Localization help
    • Full customization by easy css
    • Help for nearly all units
    • Clever rendering in accordance to gadget
    • Rendering native Single/A number of pop-ups on Android, iOS, Home windows and different units
    • Customized postback knowledge format
    • Chosen, Disabled, Select All, keyboard navigation and Placeholder help
    • A redesigned UI (No exterior icons are used now and the colour scheme might be managed by CSS)
    • Straightforward extendability to permit builders to create new widgets

    sixteen. Quick Select

    FastSelect

    http://dbrekalo.github.io/fastselect/

    Fastselect is a light-weight plugin for enhanced choose parts based mostly on jQuery. It allows responsive, quick, and smart UI upgrades of chosen parts with options like choice looking and distant dataset loading. It weighs lower than 5KB (minified and gzipped). It offers options like looking, filtering, tagging, single-choose, multi-choose, autocomplete, and dynamic AJAX content material.

    17. Selectize

    Selectize

    http://selectize.github.io/selectize.js/

    selectize.js is a light-weight plugin for making a strong and consumer-pleasant choose listing with clear and highly effective APIs. It’s helpful for tagging, contact lists, nation selectors, and so forth. It clocks in at round ~7kb (gzipped). It options:

    • Skinnability – Comes with LESS stylesheets and shims for Bootstrap 2 and Bootstrap three.
    • Clear API, code, and extensibility
    • Sensible Rating / Multi-Property Looking & Sorting – Choices are effectively scored and sorted on-the-fly
    • Caret between Gadgets – Use the left and proper arrow keys to transfer between gadgets
    • Select and delete a number of gadgets directly
    • RTL supported – Nice for worldwide environments
    • Merchandise Creation – Permit customers to create gadgets on the fly
    • Distant Knowledge Loading

    18. Mild Weight Select

    LightWeightSelect

    https://github.com/keyo321/jQueryLightWeightMultiSelect

    This can be a tremendous light-weight jQuery plugin that converts a multi-choose drop menu right into a easy two panel choice interface. The UI is totally managed by way of CSS, so you possibly can change the appear and feel in accordance to your wants. The plugin measurement is 4kb after minification, 2kb for the CSS and 2kb for the double arrow icon.

    19. BetterSelecter

    BetterSelecter

    https://github.com/BenMMcLean/BetterSelecter

    BetterSelecter is an easy, clear and straightforward to use jQuery plugin for changing the commonplace HTML choose field into a trendy and modern searchable choose field. The styling is managed by way of CSS courses which provides you flexibility to change the design per your necessities. This plugin appends a div aspect with a span inside to create a searchable choose field and show the chosen worth.

    20. SelectMe

    SelectMe

    https://github.com/bschueller/jquery.selectMe

    selectMe is a jQuery-based mostly choose alternative plugin that replaces the giant choose component right into a neat and searchable answer. It may additionally add a checkbox or radio button to the gadgets for a greater approach of choosing the merchandise. It helps:

    • Seek for particular parts
    • Choosing or unselecting all parts that are presently proven
    • Present solely chosen parts
    • Optgroups
    • Navigating by means of parts with arrow keys (up + down)
    • Choosing parts by way of area key
    • Leaping immediately to the search subject when urgent a key whereas navigating in the dropdown

    Conclusion

    These light-weight and customizable jQuery plugins permit you to flip the regular HTML choose parts into trendy and modern choose parts. These plugins supply numerous highly effective options like looking, grouping, customized HTML markup, keyboard navigation, distant knowledge loading, RTL help, a number of merchandise choice, and different small however useful options. The opposite benefit is that each one the plugins use easy CSS courses to fashion the choose parts. This provides flexibility to the builders to override or change the default plugin type to your personal type implementation.