Multi select drop down menu jquery

Multi select drop down menu jquery

Author: AlesF On: 10.06.2017

Some of these plugins are highly configurable with options, methods, and events, while others are simple replacements for select elements for styling and ease of use.

Chosen is an extensive plugin that not only restyles your select elements but provides additional functionality such as in-select searching, multiple element selection, and highlighting. Everything just works with this plugin and the desktop support reaches back to IE8 compatibility.

One positive or negative factor is that on mobile devices the select elements revert back to their native form, letting mobile browsers control how you interact with them.

The options documentation outlines all the settings, methods, and events that you can interact with to customize your elements. The plugin itself is maintained by the developers who worked on the Harvest project management tool.

Their GitHub repository is continually being updated, with additional features, bug fixes, and optimizations being rolled into the plugin. It not only restyles your select elements but also extends them with additional functionality. Much like other advanced select plugins, it packs in a whole heap of customizable feature such as:.

Select2 has been in development since back in The developers have moved from version 3 to version 4 and in the process re-written the plugin to make it faster, more responsive and mobile friendly. The GitHub page for Select2 is impressive, with a group effort behind making the plugin better with each release. This plugin is a lightweight select replacement library.

The plugin is actively being developed and improved on their GitHub repo and works really well across both mobile and desktop browsers. Selectize is an extremely developer focused, all inclusive plugin that not only provides you with a better looking select list, but also adds new useful features such as tagging, remote data binding and dynamic dropdowns. Much like Select2 and Chosen, Selectize is fairly developer focused, giving you the control over how your dropdowns will work.

Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

Their documentation is fairly comprehensive and outlines a range of options and several callbacks you can hook into to further customize the plugin. The plugin has been continually updated, with the developer releasing several iterations over the last year.

Functionally Selectize works really well. Not only does this plugin re-style the default controls, but also extends them with great functionality such as search filtering, multi-select capability and remote data binding. All of this works really well across both desktop and mobile browsers. Image Combo Box is a simple plugin that lets you define an image and description for each option inside your select controls. The Searchable DropDown plugin is one of the older plugins you might find online.

Created back in and not recently updated. When compared other heavily extensible select replacement plugins this one feels out of place. However, one great thing about this library is that it supports all the back to IE7 and works well across both desktop and surprisingly mobile browsers.

It works on two or more select elements at a time, creating a UI where you can move elements back and forth between the lists. This type of control is pretty useful if you want to sort a listing of items between two or more containers, for example sorting tasks or organising content. The Demo and GitHub pages outline how you can set this up and since there are few options to control there learning curve is fairly shallow.

However, unlike other plugins that add heaps of functionality, this plugin aims mainly to restyle your controls and leave the functionality fairly untouched. Browser support is also comprehensive, supporting older browsers down to IE7 while also falling back to using the system default on mobiles if you choose to. Another jQuery powered library that lets you create multi-select based lists quickly and easily. You can create a single select element and then easily move items back and forth between your lists.

It works well across multiple browsers and contains few styles letting you easily dictate how it should look. SumoSelect has all the functionality you need in a select list replacement. This plugin handles both single and multi-select elements, along with searching and filtering, backed by a solid set of options and events.

The look and feel of SumoSelect is light, with an emphasis on a minimalist style that you can customizer for your projects. There are several demos that showcase how all of the different options can be configured. Another noteworthy element is that this plugin provides comprehensive browser support.

SumoSelect will work as far back as IE8 on desktop and provide support for mobiles, either working normally or falling back to native controls depending on the options you supply when setting it up. These widgets have been heavily developed and highly stable, backed by a range of options, methods and events you can hook into to customize how it works. These elements are fully themeable and are based on the jQuery UI CSS framework.

Filterable Bootstrap Select is an plugin that extends the default select styling provided in Bootstrap 3.

multiselect | jQuery Plugin Registry

It should provide all you need to get a basic filterable list working for you. However with most projects maintained by a single person you never know when or if you will be able to get support.

DDSlick transforms your select elements into lightly styled dropdown menus. Each option contains its normal title and value, but also an optional image and description. There are several different options you can customize, along with events you can hook into to adjust things further. One real issue is that the website is broken , with all of the on-page examples triggering errors.

It looks like the resources were all pointing to a DropBox account that no longer exists. Normally we would skip over plugins that have broken demo pages. If you want to see how this works you can literally copy and paste the websites HTML and corresponding JS samples into a JS playground website like Codepen.

Over the past few years several of the more popular libraries have been polished, introducing new features while improving how they function overall. For example, if you just want to restyle your select elements, do you really need a library that also offers filtering and remote data binding?

multi select drop down menu jquery

For most of these libraries, you should be up and running relatively quickly. Finding the right one for you is going to be a matter of personal opinion. Chosen is my favorite: ReBleach, Fj — Thanks for the share, I just had a look at Chosen and on first look I must say I am quite impressed with it.

I just recently released SelectBoxIt. Take a look at it on Github: EXACTLY what I was looking for in a filter select plugin. Can you help me with a small problem. I want the select boxes to allow multiple choices and also have the option of chaining such that if the user selects three options in the first box, the second should be populated with options corresponding to the ones selected.

I tried using the chaining plugin and the multi-select plugin together but only one of them can work at a time. Here we are facing one big problem? If i use inline style on select box it is not working, spouse i am using different size of select drop down what should i do.

You guys should consider MagicSuggest also — http: I need your help in below functionality. Search the data in dropdown and if not found give one default option. You could also add this one of which I am the author: Does anyone know of a select replacement that is?

Unfortunately, this project uses a select replacement and AFAIK the best I can do is find them an accessible one. The jQuery UI Selectmenu widget http: This is because the authoring pattern requires a combobox to have two children, a text field which the jQuery UI Selectmenu lacks and a listbox, but I disagree with this strict failure because it ignores the possibility of a simple select. Login Create Free Account.

More from this author Using Font Awesome with WordPress Inspirational UI Design Ideas for Your Next Website Project Top 5 jQuery UI Alternatives. Full stack developer and overall web enthusiast. Focusing primarily on WordPress, I create themes, plugins and bespoke solutions with my team over at The White Agency in Sydney.

Get 10 free Adobe Stock images. Chosen is really the chosen one. Try sumo drop down inline css is working………….. Hi , I need your help in below functionality. Glad you found it useful: Hello, You could also add this one of which I am the author: Thanks for great collection, love it.

Is Your DevOps Pipeline Leaking? Adobe Limited time offer: Functional code is often touted as easier to test. David Green examines that claim and demonstrates how to get started testing David Green , 22 hours ago.

jQuery Drop Down Menu Plugins | jQuery Script

Learn to build a real-time issue list app with CanJS, a set of client-side JS libraries, and the GitHub API. Chasen Le Hara shows you Chasen Le Hara , 2 days ago. David Green examines that claim and demonstrates how to get started testing functional JavaScript. Chasen Le Hara shows you step-by-step. Latest javascript Books and Courses. Easily create forms with Redux Form. Keep up-to-date with the evolving world of JavaScript. Design issues and testing, all in one spot.

All javascript Books and Courses. Get the latest in JavaScript , once a week, for free. Get all our design and web dev books, courses and tutorials completely free. Claim This Deal Now.

inserted by FC2 system