jQuery UI Multiselect

Whenever you are dealing with Select Multiple inputs, be assured it hurts. Using Javascript you can spice up that unhandy plain old vanilla Select Multiple element that comes with your browser. Inspired by various existing solutions I ended up in creating my own version of a sortable, searchable Multiselect Widget.

First off, you can visit the demo to see the widget in action.

The script depends on jQuery 1.3 and jQuery UI 1.7 and is style-able using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed.

Usage

Add the library references.

Define your selectbox having the multiple attribute set.

Finally, you are ready to invoke the Multiselect spirits.

I already received a multitude of suggestions and contributions on this. The response was simply overwhelming.

List of potential improvements

  • Search within available options, if there are a lots of them
  • Displaying counts of selected and available items
  • Select All / Deselect All Buttons
  • Dragging items from the available list to the selected list directly
  • AJAX Support (thanks to Yanick Rochon)

I’ll try to get some time for improving the widget based on the suggestions. I’ll keep you posted about progress. Please feel free to work on my code. The latest source code is always available on Github. Just let me know if you did some modifications, so I’m able to include them.

Update#1

Added search capabilities, count of selected items and Select/Deselect All Buttons.

Update#2

Added Drag&Drop support. Also some major IE bugs have been addressed (still some remaining…).

74 Responses to “jQuery UI Multiselect”

  1. Wes says:

    Very nice control, unfortunately I added 2 of them to the same page and it didn’t work out too well.

  2. Bret Williams says:

    I’m noticing that when dragging and dropping available elements into the left column, they are not submitted with the POST form submit. If I click the + button to add the element, then it is submitted properly.

    I also could not figure out how to turn off the draggable/droppable in this function, or I would have done that, as well.

  3. thorn says:

    Well done! Thanks.
    Could you please explain how does it use scrollTo plugin?

  4. Mike says:

    For some reason the submit button does not submit the form when i sue this plugin?

    I took your demo, removed most other markup but the javascript/css form tags, select list etc.. and added a submit button.

    It doesn’t submit when I click it. Has anyone else had this happen?

    If I comment out the line that invokes the multiselect list it works.

  5. Michael says:

    Did you use the latest sources from Github?

    http://github.com/michael/multiselect/zipball/0.3

    The demo page is a bit outdated and seems to still contain a bug I’ve fixed recently.
    Trying to update it asap.

    A more recent version is always available at: http://michael.github.com/multiselect/

    And don’t even miss Yanick’s advanced version of my plugin — impressive!

    http://yanickrochon.uuuq.com/multiselect/ (temporarily down, sadly)

  6. Mike says:

    I grabbed the latest source from the first link and noticed the more recent demo included a submit button which works.
    I tested it in my form and it works wonderfully!
    None of the alternatives were nearly as nice.

    Thanks very much!

  7. Leonardo Herrera says:

    Really beautiful and I guess it will be useful. Now my question: how it calculates its width?

  8. Michael says:

    Hi!

    It just uses the width of the original selectbox. So you might want to set it explicitly (using CSS) before invoking the widget.

  9. Zeddy says:

    Nice looking script! How do i trigger an event when a element is moved from one list to another? i would like to update my database directly and therefore eliminating the need of a submit button.

    Keep up the great work!

  10. Charles says:

    Awesome plugin, so sexy and it makes the usabiliity of multiselects much much easier. Great work.

    One thing I have found is that when I drag an item(s) it isn’t reflected in the underlying select element - end result being the drag item(s) aren’t in the post values. Clicking on the plus sign to move it across works fine.

    Anyway, as a quick fix could you add a setting to the plugin that disables/enables the dragging functionality.

    Cheers,
    Charles

    Ps. using the latest from github with firefox, chrome, safari, opera, and IE - none work! Must be something unique with my page setup.

  11. Michael says:

    Hi Charles!

    Thx for spotting such an evil bug.

    Got it fixed now, pls use the latest sources from github.

    I also updated the official demo page at http://www.quasipartikel.at/multiselect

    Cheers,
    Michael

  12. BAV says:

    Hello.

    Is there any possibility of not removing elements from the right part when selected?

    For example, if considering a playlist, I may want to add the same file at different positions.

    Please advise.

    Thank you.

  13. Daniel says:

    Hi, very nice widget!!

    Will it ever be possible to personalize the content of a item, for example Italy…?

  14. Daniel says:

    Sry didn’t know html-tags will be deleted: for example a img-tag (with flag_italy.gif) and description italy in the option-tag

  15. tuanvm says:

    Hi Micheal!
    It’s really useful control. I want to modify your control by using ASP Dropdownlist instead of html Select box. But I don’t know how can I get value of selected items. Can you help me!
    Thanks!

  16. tuanvm says:

    I watched your demo. Can you show me, how do you get value of selected items when form is submitted?

  17. Markus F says:

    Hello

    Is it possible to let a double-click on the selected / not-selected items to invoke a click on the “+”

    also: if the last value has a longer text than the width (so it breaks), it isnt selectable. If it isnt the last value: it is selectable

  18. That’s nice, that’s really nice - look forward to using that :)

    Thanks,
    Chris

  19. Bernhard says:

    Hey, very cool script, thanks a lot! But after implementing it in my site, filling it with real data and so on i realized just like “wes” did that you cannot put two of them on your side - the dragging alwas lands in the first container and the other one’s graphic gets screwed up.. It’s a pitty! probably because the containsers only have classes assigned and no IDs. Is there a chance it will be fixed soon?

  20. James Taylor says:

    Hello

    Like what you have done so far.

    But have some suggestions on what would be nice to be added.

    Sort alphabetically on add/remove/drag&drop.
    Choice of selected box on left or right
    Filter on selected box for removal

  21. Pat Santora says:

    I am also interested in what BAV has requested.

    It would be fantastic to be able to allow the “+” side to add an entry to the “-” side multiple times and have the “-” side just remove it from it’s own list whenever it needs to be removed. Think you can squeeze that in there?

    I’m loving this!

  22. galax says:

    Genial …. Thankyou.. Graciass..

  23. [...] plugin JQuery Multiselect, qui fonctionne uniquement avec JQuery et JQuery UI, permet de créer des listes <select> [...]

  24. eric says:

    I have been looking for something like this for years! It handles so many problems I have been trying to solve.

    The biggest problem I am having is that if you load this with more then roughly 200 list items you receive a warning message about the script taking too long. And at 500 items the script just will not complete the list no matter how many times you click the warning message.

    I have been picking at the code trying to optimize it to be able to handle 700 list items but I am not a jquery expert.

  25. jjanesICSG says:

    Hi Michael and Yanick,

    First off, nice script. I had some additional needs for a project I’m working on and so many a bunch of changes I would like to share if you or anyone else is interested.

    Following is the comments section I added to the script. It overviews the changes I made.
    * Modifications:
    * 07/29/2009
    * jjanes
    *
    * Added defaults width, height and orientation, an explanation and usage follows.
    * width - Allows for setting container to a specific width. Accepts both
    * percentages as well as fixed measurements (ie. 100%, 300px, 100em, etc.).
    * height - Allows for setting container to a specific height. Accepts both
    * percentages as well as fixed measurements (ie. 30%, 175px, 15em, etc.).
    * orientation - Orientation was added so that the selected items container
    * could be positioned in the following alternate locations.
    * left - Selected container is left of the available
    * container. (default) option value.
    * right - Selected container is right of the available
    * container.
    * top - Selected container is on top of the available
    * container.
    * bottom - Selected container is on bottom of the available
    * container.
    * Given these options the plugin is more flexible when an interface needs
    * something other than containers being side by side.
    * actions - Allows for actions to be either the default text (add/remove all) links,
    * plus/minus buttons or no actions at all. Options are as follows:
    * links - Displays add/remove all as links.
    * buttons - Displays add/remove all as buttons.
    * none - Does not display any add/remove all links or buttons. To clear
    * selected entries, the implementor can use the “selectNone”
    * function or make user click item remove button on list.

    So if your interested, please let me know where to send the js file.

  26. Goggi says:

    @ jjanesICSG

    I would definitely be interested in your addons to this wonderful plugin.
    You can reach me at: animedb.net (at) gmail.com

    Thanks!

  27. UltraL0rd says:

    Hey guys,
    Awesome script you have written, but I must admit that not being able to add new options on the fly is quite frustrating.
    Will this be updated anytime soon?
    I’ve also had to hack in a way to retrieve the count amount(which is a useful when amounts are required), will you be adding any public functions that will allow us to retrieve this information more easily?

    If you ever get this up and running a *bump* on my issue http://code.google.com/p/wow-loot-council/issues/detail?id=12 would be awesome.

    Keep up the good work

  28. MarcusT says:

    @Michael+Yanick - I see that the code on GitHub has not been updated since June 18th, but lots of suggestions and bugs have been posted in the comments above since then… do you plan to fix/update your plugin or have you finished with it?

    @jjanesICSG - have you had any response from Michael about your code? Could you post it at JSBin.com (or somewhere similar) then post the link here so that I and anyone else can view it? Thanks!

  29. dario-g says:

    Great script. It’s awesome but… :)

    My little improvements. :)

    Auto Disable based on disabled attribute
    in 54 line, when it’s initialized:

    var enabled = true;
    if ($(this.element).attr(”disabled”)) { enabled = false; }
    this.enabled(enabled);

    Do not load when it is disabled
    in 736 line:

    if (that.options.remoteUrl && that.enabled()) {

  30. Richard says:

    Hi, I like the code, but is it possible to have multiple drop-down lists on one page?
    I have tried it and it seems to get ‘confused’. The items from the second drop-down list want to go into the 1st one.

  31. jjanesICSG says:

    @goggi and @MarcusT

    Sorry for the slow response, I’ve been hammered with day job and running my software company. I’ll put a quick example together just as soon as possible and put it out on our servers, with a link to it here. The only problem I seen so far is with Chrome and Safari pushing the selected list box to the right when they are stacked on top of each other. I believe it’s just some css and will try to make sure it is fixed in the example. Please keep in mind, I’m not a jquery expert, so there is probably better ways to accomplish the task, I just didn’t have a lot of time to get it working. If you have suggestions or fixes I would greatly appreciate the sharing :-).

  32. Richard says:

    I tried again referencing each one seperatly, but this didn’t work either:

    $(document).ready( function() {
    $(”#groupID1″).multiselect();
    $(”#groupID2″).multiselect();
    $(”#groupID3″).multiselect();
    });

  33. Michael says:

    First of all, sorry for taking me so incredibly long to reply.

    Thank you so much for your suggestions, improvements and bug reports!

    Sadly there’s still no time I can spend on the widget right now. :(

    As I already said on the jQuery UI mailing list, I’m not interested in owning a copyright. So please feel free to hack on my codebase to create extended versions and variations based on it.

    Ideally fork the project at Github and put your changes there, so I can keep track of it. I’ll publish a list of versions on the Github project page, so people can pick one of your (probably more complete) versions.

    Please also consider using the latest version located in the next branch (http://github.com/michael/multiselect/tree/next) as a baseline, as the code is more complete (although not much tested).

    Thank you all for your efforts!

    I’ll be back one day to hack along with you again, promised ;)

  34. JIM says:


    Medicamentspot.com. Canadian Health&Care.Best quality drugs.No prescription online pharmacy.Special Internet Prices. Online Pharmacy. Order drugs online

    Buy:Super Active ED Pack.Viagra Super Force.Zithromax.Maxaman.Cialis Super Active+.Cialis Professional.Levitra.Soma.Cialis Soft Tabs.Viagra.Tramadol.Viagra Professional.Viagra Super Active+.VPXL.Viagra Soft Tabs.Propecia.Cialis….

  35. ROGER says:


    CheapTabletsOnline.Com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. Low price pills. Order pills online

    Buy:Prevacid.Synthroid.Arimidex.Zovirax.Mega Hoodia.Lumigan.100% Pure Okinawan Coral Calcium.Zyban.Actos.Prednisolone.Nexium.Retin-A.Accutane.Petcam (Metacam) Oral Suspension.Human Growth Hormone.Valtrex….

  36. ANGEL says:


    CheapTabletsOnline.com. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. No prescription pills. Buy drugs online

    Buy:Acomplia.Nymphomax.Zetia.Zocor.Buspar.Female Cialis.Benicar.Cozaar.SleepWell.Advair.Aricept.Prozac.Lipothin.Amoxicillin.Seroquel.Wellbutrin SR.Female Pink Viagra.Lipitor.Lasix.Ventolin….

  37. ANDY says:


    CheapTabletsOnline.Com. Canadian Health&Care.Special Internet Prices.Best quality drugs.No prescription online pharmacy. Low price drugs. Buy drugs online

    Buy:Prednisolone.Zovirax.Zyban.Retin-A.Mega Hoodia.Synthroid.Actos.Accutane.100% Pure Okinawan Coral Calcium.Human Growth Hormone.Petcam (Metacam) Oral Suspension.Nexium.Prevacid.Arimidex.Lumigan.Valtrex….

  38. DWIGHT says:


    NEW FASHION store. Original designers collection at low prices!!! 20 % TO 70 % OFF. END OF SEASON SALE!!!

    BUY FASHION. TOP BRANDS: GUCCI, DOLCE&GABBANA, BURBERRY, DIESEL, ICEBERG, ROBERTO CAVALLI, EMPORIO ARMANI, VERSACE…

  39. ERNEST says:

    buy@Amoxicillin.com” rel=”nofollow”>.

    Buy:Viagra Super Active+.Viagra Soft Tabs.Viagra Professional.Maxaman.Tramadol.Cialis Super Active+.Super Active ED Pack.Cialis.VPXL.Soma.Cialis Professional.Levitra.Viagra Super Force.Cialis Soft Tabs.Viagra.Propecia.Zithromax….

  40. EVAN says:

    ████████►BUY VIAGRA◀███████…

    ████████▲▲▲▲▲▲▲▲▲████████…

  41. CHARLIE says:

    ████████►BUY CIALIS◀████████…

    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲…

  42. CLINTON says:

    ████████►BUY LEVITRA◀███████…

    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲…

  43. TERRANCE says:

    Abilify

    Buygeneric meds…

  44. ANTHONY says:

    rxlist@abilify.now” rel=”nofollow”>..

    Buydrugs without prescription…

  45. RICARDO says:

    fosamax@actonel.now” rel=”nofollow”>.

    Buynow…

  46. JIMMIE says:

    Actos@official.site” rel=”nofollow”>..

    Buywithout prescription…

  47. DARRELL says:

    altace@medication.now” rel=”nofollow”>…

    Buygeneric meds…


Dudes

Projects

Popular Posts