I’ve re-written this plugin using the jQuery UI widget factory. As such, a number of new features have been added, bugs fixed, and performance issues addressed. While this version will still be supported, I highly recommend you use this new version instead!
I’ve been working on a multiple select plugin on and off for the past couple months and finally have it stable enough for a first release. When I started this project my intentions were only to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.
- Current version: 0.6 (05/04/2010 – Changelog)
- View demos
- Download source (12.5 kb) or minified (6.8 kb), and the CSS file.
- Follow this project on GitHub
Features
- Full ThemeRoller support.
- Optgroup support with clickable labels.
- Optional header with check all / uncheck all / close links.
- Degrades gracefully.
- Keyboard support.
- Ability to hook into 5 different event callbacks.
- Display the checked options in a list with a configurable maximum.
- Easily change the position, fade speed, scroll container height, links text, and input text.
- The widget width inherits from the original element, but is also configurable as a parameter.
- Pre-selected & disabled option/widget support.
- bgiframe support.
- Only 6.9kb minified (2kb Gzipped).
Compatibility
MultiSelect is compatible with jQuery 1.4.0+ and all themes from jQuery UI 1.7+. This plugin is known to work in (but not limited to):
- Firefox 2 – 3.6
- IE 6 – 8
- Chrome Beta/4
- Safari 4
- Opera 10
Usage
First ensure you’ve included jQuery 1.4, a jQuery UI theme of your choice, and the jquery.multiselect.css file. You don’t need the jQuery UI library itself, just the theme files. The simplest use of MultiSelect is to bind the widget to your select box:
<select id="MySelectBox" multiple="multiple" name="MySelectBox"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select>
$(document).ready(function(){ $("#MySelectBox").multiSelect(); });
Do not forget to set your select boxes to multiple="multiple" if you want this plugin to degrade gracefully. Any option tags with the selected="selected" attribute will automatically be checked by default, and any option tags with the disabled="disabled" attribute will automatically be disabled by default.
Callbacks
Inside the onOpen callback, this refers to the container holding the header and checkboxes. If you want to gather all the checkboxes inside the multiselect that just opened, for example:
$("#MySelectBox").multiSelect({ onOpen: function(){ var $checkboxes = $(this).find('input'); } });
Inside the onClick callback, this refers to the checkbox that received the event. Example:
$("#MySelectBox").multiSelect({ onClick: function(){ if(this.checked){ alert("I was just checked!"); } } });
See the options below for a full list of callbacks.
Overriding Options
Options for this plugin are exposed in $.fn.multiSelect.defaults, so you can override the default options for all instances like such:
// set the minWidth parameter for all instances to 500 pixels $.fn.multiSelect.defaults.minWidth = 500;
Passing a function to the selectedText parameter
As of 0.5, the selectedText parameter can accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. As you can see in the example, this gives you 100% control of the display:
$("#MySelectBox").multiSelect({ selectedText: function(numChecked, numTotal, checkedInputs){ // example: emulating the default behavior return numChecked + " checked"; // example: emulating the selectedList option return (numChecked < = 5) ? checkedInputs.map(function(element){ return element.title; }).join(', ') : numChecked + " checked"; } });
Options
This plugin is configurable with the following options:
| Parameter | Description | Default |
|---|---|---|
| showHeader | A boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links. | true |
| maxHeight | The maximum height in pixels of the scrolling container that holds the checkboxes. | 175 |
| minWidth | The minimum width in pixels of widget. Setting to auto (default) will inherit the width from the original select element. |
200 |
| checkAllText | The default text of the “Check all” link. | Check all |
| unCheckAllText | The default text of the “Uncheck all” link. | Uncheck all |
| noneSelectedText |
Renamed from
noneSelected in 0.5!The default text the select box when no options have been selected. |
Select options |
| selectedList | A boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled. |
false |
| selectedText |
The text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”.
New in 0.5!
As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples. |
# selected |
| position | The position of the options menu relative to the input control: top, middle, or bottom. | bottom |
| shadow | A boolean value denoting whether to apply a CSS shadow (class ui-multiselect-shadow). | false |
| fadeSpeed | How fast (in ms) to fade out the options menu on close. | 200 |
| state |
New in 0.5!
The default state of the widget. Either open or closed. |
closed |
| disabled |
New in 0.5!
Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this. |
false |
| onCheck | A callback to fire when a checkbox is checked. | Function |
| onOpen | A callback to fire when the options menu is opened. | Function |
| onCheckAll | A callback to fire when the “Check all” link is clicked. | Function |
| onUncheckAll | A callback to fire when the “Uncheck all” link is clicked. | Function |
| onOptgroupToggle | A callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument. | Function |
Known Issues
A few issues are still outstanding:
- No onClose callback yet.
- The position should automatically change if the current position will prevent the options menu from showing. E.g., if the input is at the bottom of the page, the options should appear not appear below the input.
- In IE, the shadow parameter increases the width and height of the container, rendering it a few pixels wider than the input and throwing off the alignment. You can easily edit the CSS file and remove the IE-specific shadow filters, however, or opt not to use it.
- If the select box you’re transforming into a multiselect is disabled, the option tags will actually inherit the disabled property only in webkit; Firefox and IE do not display this behavior. I’ve filed a bug on this. Therefore, to be cross-browser compatible, if the entire widget is disabled by default, the class ui-state-disabled is applied and the disabled attribute is removed. This is important to note because checkbox values could be transmitted during submit, even if the select is disabled. To toggle disabled state, toggle the ui-state-disabled class on the widget.
This bug does NOT effect the disabled state of specific option tags.
Related posts:
- jQuery UI MultiSelect Widget
- jQuery Related (Dependent) Selects Plugin
- jQuery: modifying the submit button when a form is submitted
Tags: jQuery, multiselect, themeroller, UI
jQuery and Performance: What is ‘this’?
FamFamFam Silk Icon Set in Base64 Encoding
looks like that “select all” only works if no checkbox is selected
@foo, what browser are you using? It seems to be working fine in all the browsers I’ve tested (see the Compatibility section).
Hi there. Looks good. I’ve always wanted something like this, that takes optgroups, but allows you to tick the optgroup heading and have everything in that group ticked (and likewise unticked). Does your plugin do that, and if not, do you think that’s a useful function? Or am I just awkward/weird?
@Steve, that will be really good, I also have another request.
Can we set selectedText as comma separated values of selected options, like Option 1, Option 2, Option 5? If selectedText is larger than the combobox container, it should display in a tooltip and should be truncated.
Thanks for the nice plugin.
@Steve, I dig that idea. I’ll work on it for the next release.
@Allied, the select text can be a comma separated list by setting the selectList option to true. I’m not really sure what the best way is to manage overflow… I don’t think a tooltip is a good idea because I’d rather not integrate two plugins into one; I’d like to keep this one as lightweight as possible. The input could automatically grow to fit them all in, but that just seems unnatural.
Another option is to just use the onClick callback and manage your own list of checked items, if you feel as if overflow is likely to be an issue in your select.
I’m open to ideas.
to expand on Allied’s idea, I think the selectedList should be a numeric value with 0 indicating the current value of false, and any non-zero number indicating the number of selected values that should be displayed in a comma separated list… if the number of selected items grows beyond that, it should switch to the “false” view, with just the number of options selected
Luka, cool idea. I definitely agree that there should be a configurable limit to the number of list items. Otherwise, especially in larger lists, I can see there being a lag when “check all” is clicked.
Great stuff. Admittedly I’ve only played with this for an hour or so, so the answer might be right in front of me, but is there an easy way to alter the width so that if I want to stick 5 of these on a page I can have them vary in size?
Nice plugin. I really like it and its use of the UI CSS framework.
Excellent work Eric. One feature I’d like to suggest is to make it work with normal non-multi selects.
Great plugin, really. I just have one doubt, how do you get all the checked options of only one multiSelect. (supposing I have like three of them on a single page).
THX
I would like to know if it’s possible to fire any events when the check/uncheck buttons are clcked. BTW, this is an excellent work
Thanks
@Luis: $(one_multiselect).find(“:checked”)
@David, coming soon, that one was an oversight
@Bob, true, I could turn it into a generic select box widget with “multiSelect” being an option. For now though, check out the selectmenu widget in jQuery UI’s dev wiki: http://wiki.jqueryui.com/Selectmenu
@Luis, the checkboxes have the same “name” value as the original select box, so combine that with the :checked filter:
@Mark, I’ll add this in as well. If you need to bind events to those links immediately, try:
@Eric, thanks!
One other thing. I was mocking some pages and had a group of your multi-selects sitting above some of jquery UIs tabs. When the multi-select dropped, the tab bar of the UI tabs where z-indexed over top the multi-select. The multi-select was over top the content of the tab.
I made this change and it fixed it, just not sure if it’ll cause my other problems down the road…
.ui-multiselect-options { display:none; padding:3px; z-index:1000; }
To all who contributed, your ideas have all been implemented in v0.3, which I just released. Thanks for contributing! The demos and documentation above have also been updated. The relevant parts of the changelog:
Added: ability to toggle optgroup check state by clicking on the header.
Added: onCheckAll, onUncheckAll, and onOptgroupToggle callbacks.
Added: the selectedList now takes a number denoting the maximum number of items to display as a list until yielding to selectedText.
Added: the widget’s default width now inherits the width of the original select element.
Added: mixWidth parameter to force a minimum width; defaults to “auto” (inherit).
That is excellent work! Thanks so much for responding so quickly. We’ll use this for sure.
Great work! Thanks
Looks very strange with Dark Hive theme. You should check http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/ and style it similar. Also, checkboxes are not styled, check http://maninblack.info/_proj/jquery-ui-checkbox-radiobutton/demos/checkbox-radiobutton/.
@umprisky, it looks like I left out the ui-state-default class on the input element. I’ve updated the code + demos to reflect this… thanks for pointing it out. I’m going to stick with what’s natively supported in ThemeRoller for styling; it would be nice to see checkbox/radio support, though!
@Eric Definatelly!
Eric – this is a really great use of progressive enhancement and the jQuery UI CSS framework. Very nicely done! We had a version of a widget like this in dev, but yours is even slicker.
Creating custom check boxes and radiobuttons is possible with the css framework. We created circle and check icons in the icon sprite so we’d have the necessary pieces but we’ve haven’t built a really great example yet for people to use (the example above is a good start, but could be refined visually). Hoping to spec out all form elements with ThemeRoller soon.
I sort of like the native checkboxes here, but having an option to style them would eventually be cool. Keep up the great work!
Seems my z-index issues remain in IE7. The tab bar of the jquery UI tabs appears over any multi-select dropdown.
Possibly as much of a problem with the tabs…
Are you injecting the markup for the widget menu at the very end of the body tag? That usually helps with z-index issues. Are you also using an iframe protective layer?
@Todd, thanks for the kind words! I’ve been following the Filament Group for a while now and am honored you found your way over here
I plan on rewriting this to use the jQuery UI widget factory soon, so if you have any design/usability ideas for this type of widget I’d love to hear them.
@David, I’m reluctant to add a z-index in the CSS file because I’m not sure what (if any) adverse effects relative positioning could cause. I haven’t been able to think of anything negative though, so I’ll play around with it on other widgets and stick it in there.
Eric,
I’ve been playing around with the multiselect plugin (very cool)…I’ve found some bugs and I’d like to report them. Which is the best method to do that? Git Issue Tracker?
Thanks,
Ralph
I’ll just leave the issues I find here.
minWidth should be a set size. http://jsbin.com/multiSelect1
showHeader: false breaks the scrollbar http://jsbin.com/multiSelect2
I’ll report more as I find them.
Looks good.
Ralph
Great stuff Eric!
Have you considered making the Select Text a csv of part of the selection? So the user gets an idea of what has been selected… even if not all selections being shown, it might be helpful.
The following plugin did something like that, however, I plan to use yours instead on my current project
http://dropdown-check-list.googlecode.com/svn/trunk/src/demo.html
Eric, silly me. I should have read a little closer. Looks like that is an option. You even had one on the demo page… huuuuu me
Demo examples on your website do not work: $(“#themeswitcher”).themeswitcher is not a function.
@Ralph, thanks – I’ll fix these ASAP.
@Elijah np
@Kamil: It looks like jQuery UI took down themeroller temporarily. I removed themeswitcher and included the redmond theme by default on the demos page.
muchas gracias.
The ThemeSwitcher widget is back up. Sorry for the inconvenience.
Hi Eric,
Great work! I have made a minor mod that adds the current SELECT control’s class to the new objects you create.
That way any CSS that was created for the original SELECT, will also be applied to the new objects.
// line 27
// get class of existing SELECT control
var cls = $select.attr(‘class’) + ‘ ‘;
// inject it into new object
html.push(‘‘);
Cheers,
Nick
This looks very nice. I’ve used the plugin that this started as a port of and ran into an issue when instantiating it on select boxes on different z-index’s. Basically, the dropdown wouldn appear below the z-index of the select box, thus would not show up. We hacked a solution into it, but I’m wondering if that’s as issue with your rewrite?
Great work!
- Jack
Is there a graceful and clean way to reset? Form reset seems to set the text to blank. I actually want to just set everything back to unchecked, but simply .check()-ing everything that is checked doesn’t alter the selected text.
Also, the title doesn’t seem to update when the last item is unselected.
Thanks for the bug reports all. 0.4 is now out, which fixes most of the stuff brought up and adds some additional functionality. See the changelog for specifics.
@David, graceful form resetting is now supported with one caveat: if options are preselected and the form is reset, the control’s text defaults to whatever is in the
noneSelectedparameter, even though there are options set. This is clearly not the desired behavior, but the fix requires some heavier refactoring which will come soon.@Jack, that z-index issue should be fixed now. The options menu in 0.4 is relative positioned with a high z-index.
Thanks a ton for the fixes! Loving this plugin.
Thanks for the change, Eric. FWIW, for the use that I had the high z-index wouldn’t have quite done it, either, because we had another div that opened on top of it sometimes (in a higher z-index), in which case your high z-index would result in it “peeking through” unless we adjusted our additional layer’s z-index (which would have been a kludge if we had to go higher than yours). At the risk of getting crazy with the plugin options, maybe expose one for setting the z-index, or document how to easily do it via css (and include a hook for it)?
I remembered another stumbling block we hit with the one you started to port: we had to reload the items in the picker based on a selection in another dropdown. That caused us some gyrations with having to dispose of what the control had rendered, reloading the select list and rebinding.
@David, forget what I said about form resetting. I was completely misinformed and the fix was much easier than I thought. I just pushed out v0.4.1 with the fix.
@Jack, yeah, I can see that being an issue. This brings up another good point: I should be using live events instead of bind() for each checkbox. Doing so would likely increase performance for larger/multiple lists, and in cases like yours, you could easily inject new items into the list without hiccup.
Graet Job. MultiSelect Plugin works excelent. May use it for building Symfony (PHP Framework) multiselect widget? I will also put all backlinks and required information there.
Kamil, of course. I look forward to seeing it.
Thank you, You can check it out here: http://blog.adryjanek.eu/2010/02/17/symfony-and-jquery-sfwidgetformjquerymultiselect-ver-01
Clicking the checkmark image for “Check All” actually seems to execute the functionality for “Uncheck All”. Have to click the link.
Also…
Just an idea, but I was thinking if Check All or Uncheck All don’t actually do anything, might be nice to not fire the callback. For instance if everything is already checked and check all is clicked…and visa versa.
However, while I can’t think of anything now, that may screw folks up. Could it call the callback with an optional true/false that indicates whether or not something happened?
Hi!
Cool stuff!
Is there an easy way to use this for non-multi select boxes too?
Greetings,
Jo
I had a similar thought, but hadn’t had a chance to look and see if was baked in already. If I wanted to put a normal select box next to a multiselect, it’d be nice if they came out rendered the same way…without me having to do the extra styling work myself.
@Jo and @David, a widget like this is already in development: http://wiki.jqueryui.com/Selectmenu
I would rather not integrate this functionality because 1) it requires different logic and markup, 2) the menu in development is way better than anything I’d be able to bake into multiselect, 3) I want to keep this as lightweight as possible.
HTH
Hi!
Cool widget!
I have a listbox which are disabled, but the multiselect drop down list seems not to honor this property.
Control in markup:
Anything i need to do in order to make it disabled?
asp:ListBox id=”listBoxCustomPeriodicity” runat=”server” CssClass=”multiselect” SelectionMode=”Multiple” Enabled=”false”
Apparently i cannot post my markup code here? Anyway it is a simple listbox with enabled set to false.
Hi Eric,
Great job on the widget! Couple suggestions.
1) Use offset() instead of position() to determine the placement of the drop down.
2) Consider using the filament group’s “fg-button fg-button-icon-right” classes for padding and size consistency
3) There is a border issue when the button is inside of a div of class ui-widget-content
Hi Eric
First off terrific plugin…Nice Job!
I’d just like to add my vote in along with Bob and Jo for a single select option. In my case I am limited to a column of select boxes in a sidebar and not all of them require multi-select capability. I also want them all to have the same look and UI. And it would be nice to manage all the select boxes with one plugin.
You already have the logic to check/uncheck all the boxes. I would think all you need to do is add some exclusive logic to uncheck all options except for the most recent once checked.
Again…Great Plugin!
Thanks
Just a follow up.
I have to admit the single select project you referenced does look like a pretty good solution.
http://wiki.jqueryui.com/Selectmenu
This looks like what we need but I can’t get it to work on our page. If you can take a loook at the example page: http://poslovi.infostud.com/test/untitled.html
The multiselect selects are properly replaced but nothing happens when I click on them (in FF3 and Chrome. IE8 opens the box but its ~1000 pixels wide).
The setup is at the bottom of the untitled.js with jQuery instead of $ because of legacy prototype code but that didnt make any problems with other jQuery plugins we use.
Any ideas as to what is going wrong with this would be appriciated.
Thanks
Caught something else today…upon form reset, the title doesn’t reset.
Hi folks, 0.5 is out today. This blog post has been updated to reflect the changes. Changelog:
@David, I’ll look into that.
@Shinhan, I looked briefly and didn’t see anything obvious. Try reducing the included CSS/JS and see if you reveal a conflict. It looks like the display property is never being set to “block” on the options container.
@Evan, I fixed a few issues with the widget inside a ui-widget-content class. I switched to offset() from position() when outside a .ui-widget-content, but position() is necessary inside ui-widget-content to get the position relative to the widget’s offset. If filament group’s styling becomes core to ThemeRoller I might consider adding those classes… I like the native styling more to be honest.
@Andreas, you can now make the entire widget disabled in 0.5
I might be missing how to do it but, some things I would like to see would be an automatic load of the select list from possibly an ajax call.
And ability to search the lists. I would like to use this on lists 400+ items and having to scroll through the entire list inhibits functionality. Even the ability to jump to the letter or letters as you type would be nice such as a regular select list. You could probably leverage ajax loading of values to populate/refresh the lists on searches.
Nathan, I haven’t added in AJAX support because this widget is really designed to transform existing select boxes, rather than create them or their options. You could still populate a select box with AJAX and turn it into a multiselect just as easy.
It’s also best suited for smaller select boxes. A different approach to the multiselect widget with support for large number of options & filtering is available @ http://quasipartikel.at/multiselect/
Nathan, it sounds like an autosuggest control that makes ajax might be more appropriate. I don’t know of any jQuery plugins off hand that combine ajax autosuggest and checkbox selections, though.
Another possible approach might be to use the jQuery listnav plugin that my company created, and put checkboxes in your LI’s. Here are some demos (none with checkboxes, though, I’ve never actually tried it, but I think it will work if you can use some js to get the checked items while they’re hidden): http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx
It’s made to work with big lists.
Thanks Eric, I’ve looked at http://quasipartikel.at/multiselect/ and it was great in firefox/chrome but with large lists it took way to long to initialize the list in IE. After first page load and it built the containers it ran fine but it would take a couple minutes to do that initial load. And as far as I can tell its no longer being worked on or at least questions have not been answered for months the last time I checked.
Jack would it be possible to add the listnav into the top of a multiselect container since I would still need to select multiple items. I’ll play with it and see what I can come up with.
Nathan, you could use listnav with checkboxes and use some js to create a list of selections somewhere else on the screen. IE: as someone checks/unchecks a checkbox, do something like add/remove it from the list, then use all of the checked boxes for your save.
I can embellish on that idea some more if you’d like… just don’t want to drift off topic here.
Is there some way to add css class to options and option groups?
I want to add colors to the options and groups.
First of all thanks for a nice plugin!
I dont know so much about callbacks and how jQuery works yet, but are there any way to get a list over the selected content? I ask this because i want to use the content selected in another part of my jquery code.
Shaoxuan, there’s nothing baked in because it relies on ThemeRoller for all the styling. You can either roll your own ThemeRoller theme, override the existing theme’s classes, or use jQuery’s addClass() method to add your own.
Magnus, try $(“a.ui-multiselect input”).val().
hi,
very nice plugin, great!
Are there any plans to add autocompletion for the input field?
I think this would be an additional, great improvement!
thx.
hi,
i made a simple enhancement to your script:
I added a new option
multipleSelect : true [default]
which defines if the combobox uses checkboxes or radios.
i saw that the “single-select” was required by other users before.
see
http://weblications.webatu.com/jquery.multiselect.js
for the complete code.
Hola Eric:
Sencillamente felicitaciones! Es un excelente producto.
Saludos
@nathan and all,
I’ve forked the project on github and uploaded an enhanced version of the latest source code (0.5 at time of writing) that adds a “seekto” custom event which will activate when the user types within the widget to retrieve a particular result (useful in very long lists). Like nathan, I needed this functionality as I have been using your most excellent plugin at work as a way for our staff to pick multiple product options during product entry, but they requested the type-to-seek functionality for the especially long lists. I do think that while Eric says it wasn’t intended for these long lists that it does perform well actually, I have no problems with it (however we do have a controlled environment where we our staff is only using Firefox so I have not tested my added functionality in any other browsers).
The typing should work when you have the widget focused and open, or if any one of the inside labels is focused – I have added two additional keypress bindings to accomplish this. The use of setTimeout keeps track of what the user is typing, clearing the word or phrase after 1000MS of idle time (that value is hard-coded for now). Since spacebar toggles the value of the option you have selected while typing, the seekto functionality ignores spaces: to seek to “X Small”, you would just type “x” then “s”. The searching is also case-insensitive and works fine with any of the meta characters in regular expressions.
The code is available here: http://cloud.github.com/downloads/aplacito/jquery-multiselect/jquery.multiselect.js.
I hope this helps some others, it was a lot of fun to code this addition to the plugin, which is by and large my favorite jQuery-based multiple select plugin of those I have seen so far!
P.S. I don’t actually use Git so I probably didn’t fork this in the “proper” manner, I really just needed somewhere to upload the file to share it with everyone here.
rooki – THANKS! I havent tested it exhaustively but it appears to work very well.
Alex – This is something I may need in the near future. However for my use I would need to filter down the list of options to return matches on any substring within the options and then let the user make a selection from the filtered list. This is probably out of your scope but I just thought I’d throw the idea out there.
hi rich,
i’m sorry, i haven’t tested it exhaustively yet, too. Seems to be an easy improvement, i hope it works as expected!
Anyone managed to get the select list working in columns, to avoid scrolling? Basically how the WordPress ‘tag select’ works. Would be useful to be able to specify a number of columns to use.
One more… Is there a way to allow the user to manually enter a value which does not appear in the list? Useful when used in conjunction with the selectedText option.
Undocumented Feature
Setting maxHeight to “auto” displays the complete option list without the vertical scrollbar in IE6 and FF3. In IE7 the scroll bar is visible but disabled.
$.fn.multiSelect.defaults.maxHeight = “auto”;
Hi. There is a possibility to uncheck all the option without clicking the link but with a command line?
Because i’m using in a modal dialog and when I close it and reopen it remembers the choise, so I need to purge the options on close.
Many thanks and keep a good work!
Fantastic plugin, right what I was looking for – thanks a 1000 times.
I was previously running the other popular jQuery multiselect Plugin which brought me into major problems with huge amount of data.
Yours instead just eats it, as if there were no 500 options.
Superb work, can wait for the 1.0 final of the UI widget version.
Hi Eric,
How easy would it be to add an option that disables all check-boxes after a certain number of selected items has been reached? Any tip on how I can achieve that for now?
Something like:
$(“#MySelectBox”).multiSelect({
maxSelectedItems: 3
});
Many thanks!
can someone please help me?
@Amy, I actually landed that feature in 0.6pre last thursday
http://github.com/ehynds/jquery-multiselect/commit/d11fc003423ec84b3d0493f46b23100f48d36a37
@Freddie, you can accomplish this now by hooking onto the onClick callback and checking the number of checked inputs. If you can wait a week or so, I’m releasing a UI widget version of this plugin which will make this much much easier…
@kreker, not with this plugin version, but with the upcoming widget version, you’ll be able to write:
$("select").multiselect("uncheckAll");For those who are interested, the widget version is built on top of the jQuery UI widget factory and is therefore much more robust and customizable. You can follow its development on github: http://github.com/ehynds/jquery-ui-multiselect-widget
It is stable, I just need to find time to write the docs and unit tests before I can release it.
mmm ok thanks erik, but I need it now…can you please find another solution in the meantime?
many thanks
Kreker, hook into the onOpen callback:
Now, the widget will reset itself each time the select is opened. If you don’t want to use onOpen, then manually find the inputs & the button like:
hope this helps.
@Amy
???
who the …. is Amy, and why does amy repeat exactly what i did post on March, 26th ??
(sorry about this post, has actually nothing to do with the plugin).
rooki, spam bots are getting smarter… Amy’s comment was a spammer who duplicated your comment. I didn’t notice your post on the 26th, but thanks for the contribution, it has landed. I’ll credit you in the changelog.
This is a great plugin. Thanks for sharing.
I’d like to use it in a fluid layout. So the minWidth is left at auto and the select has width:50% in the CSS. What’s the best way to reset the width of the control when using the window.onresize event?
Apologies if this is a dumb question but…
I’m using this inside a jQuery UI dialog. It seems to work fine when I first open the dialog but not the second time (I see the header and dropdown but it’s empty.)
This is the code I’m using…
$('a#click-me').click(function(){
$('#click-me').dialog('open');
$("#my-Select").multiSelect();
return false;
});
Hello Eric,
I tried to use “Related Selects” and “MultiSelect” plugins together but they seem not like each other that much. Although, they both work perfectly alone.
Do you know how/if I can get this working using your plugins?
UseCase: Country and Province related drop-downs. Only one option can be selected from the first drop-down (no need to use “MultiSelect”). When the first drop-down is selected, the second drop-down is reloaded (“Related Selects”), and the user should be able to select multiple options from it.
Much appreciated!
Bug report…
If the control is placed in a relatively positioned container, the dropdown positioning is calculated incorrectly.
Great multiselect widget.
@Freddie: Here’s what I hacked together to set a maximum of 6 items:
Tested on Firefox 3.5.9/Linux.
I liked very much your plugin. But I’m having a little trouble with cloned multiselects (added dynamically).
I managed (not fully tested yet) to get it through by cloning and hiding the original select element before converting it to your plugin and using that original element as a base to reinstantiate the multiselect.
Is there a better way to do it? If not, I’d suggest in a future release to leave the original select by default (or by option) hidden instead of removing it from the DOM.
Further to Jude’s comment above about how to easily limit the number of inputs I use separate function (for additional usage when using more than 1 multiselect) …
$(SELECTOR).multiSelect({
onCheck: function(){
if (this.checked) {
if (countChecked(SELECTOR) > 3) { // number here is max allowed to be clicked
$(this).removeAttr("checked"); // remove the last checked item
alert(' You have selected too many items, the last item selected was ignored');
}
}
function countChecked(SELECTOR){
var n = $(SELECTED).length;
return (n-1);
}
Hope this helps someone.
Cheers
Your plugin looks better then the one on the jqueryui development page. Will you be adding a search feature?
Eric, great plugin, thanks!
But … it seems that recent change “positioning now determined by offset() instead of position()” doesn’t work well in all situations when you have parent div(s) with relative positioning, as Rooney reported.
@Rooney – here is “quick-fix” for the bug (it worked in my case)
just change the end of line 204 from:
” ? ‘position’ : ‘offset’](), ”
to:
” ? ‘position’ : ‘position’](), ”
Cheers
Yes I have a bug with position. It is resolved with Zoran tip (thanks).
Hi!
A quick question, the “select options” text can be seen and clicked through other elements, for example an calendar extender. That is, it seems like it has a high z-index, but i cannot find any css indicating this.
Any ideas? (can post an image if im unclear)
I think this looks nice. the problem I have is I need a multiselect and a single select and I want them to look the same.
Is there a way to turn off mutiple select for this plugin?
0.6 is out and (should) fix all the positioning issues. I reverted back to position() from offset().
@Andreass, any chance you can post or e-mail me a link to the page? MultiSelect should play well with other UI widgets.
@Vilasack, new in 0.6 you can set the
multipleparameter to false, which replaces the checkboxes with radio boxes. If you do this you’ll also want to set theheaderparam to false, because “check all” links wouldn’t really make sense. It’s somewhat hackish, but works well in cases like yours.@Navitz, I am planning an extension that will replace the header links with a search box. If I could only find the time…
@Rooney, you’re trying to initialize the widget twice, and this version of the plugin does not protect against that. Remove your call to multiselect outside of that handler; you only need to call it once.
Thanks all.
Is it possible to eliminate the radio button if it is a single select mode?
I’ll give it a try. Thanks for the quick response.
I set the header: false but the header is still there.
How Do I set the default select value?
It would also be nice to have a function that returns a list of selected value separted by comma.
@Vilasack, not possible to eliminate the radio buttons. The core of this plugin revolves around some kind of input interaction, as it was designed to be a multiple checkbox picker from the start. See this select menu widget instead.
try
showHeader: falseinstead ofheader: false.Eric,
Yeah I figured it was showHeader after i post the comment.
I am trying to programmatically pre-select some value and have the selected value show in the input. Do you think you can add this feature?
onClick callback appears not to work.
$(“#MSText__c”).multiSelect({
onClick: function(){
alert(‘woo’);
}
});
Does nothing.
$(“#MSText__c”).multiSelect({
onCheck: function(){
alert(‘woo’);
}
});
Does wonderful things.
Anyone else had a problem with ie7 and loading select items with preselected options (selected=”selected”)?
It made the plugin break completely for me in ie7, but once i commented out the line:
html.push(‘ checked=”checked”‘);
it worked again, ah ie… I made a pretty ugly workaround where if the browser was ie i add a class “checked-box” which i later check with jquery.
Great plugin btw, i have to try 0.6 now that its out, if i can remember my modifications to 0.5, i think it just was the positioning, that ie7 issue and adding a maxWidth option (that affects the select box part but not the drop down, i had a situation where i had to fit 5 multielects in a horizontal row and just couldnt have them work out their own width)
I love this plugin, but I can’t seem to get it to work within a jQuery UI dialog. I can’t figure out what the deal is, no matter what z-Index adjustments I make, the dropdown ends at the bottom of the dialog.
@d3developer, there is no onClick callback; as you discovered, it is called onCheck.
@Fredrik, I tested this out in IE7 and I wasn’t able to replicate your issue. Do you have a test case I can look at?
@Jeff, the .ui-dialog class has the overflow property set to “hidden”. You’ll need to override this:
I did a little testing just now, and it seems ie:s issues was with the my custom selectedText, not thats its so very custom, its the one from your example but showing fewer titles.
Anyway, when i ran it with basic configuration, or just removed my custom selectedText it worked fine in ie.
You can see it in the example here, wasn’t until my 3rd test i realized it was the cause.
http://m.iijax.com/multi/
@Eric Can’t believe I missed that! Thanks!
I’d like to programmaticaly call a method in the plugin:
example:
var myControl = $(“#ddlSortOrder”).multiSelect({
minWidth: 250,
selectedList: 3,
showHeader: false,
multiple: false,
onCheck: function() {
this.$options.close();
}
});
myControl.$options.close();
any suggestion?
Another nice to have would be a noneSelectedStyle so that it would be a piece of cake to do something along the lines of the Google search box in FF. When nothing is selected it can be faded out a bit, italics, something along those lines, as soon as something is selected, that style gets ripped off.
Can do this by hand of course, but it would be a cool option to have.
Those of you wanting this to just be a regular drop down can probably use the radio option…and hide the radio. *shock* =)
hi.
how to make usability better?
example values:
“red”
“green”
“blue”
“black”
“white”
if there are in the main field shows “1 selected” if selected one first option.
Must be “red” in main field
if there are in the main field shows “2 selected” if selected two options: “red” and “green”.
Must be: “red, green”
if there are in the main field shows “5 selected” if selected all options.
Must be: “red, green, …”
IMHO
hi.
how to make usability better?
example values:
“red”
“green”
“blue”
“black”
“white”
if there are in the main field shows “1 selected” if selected one first option.
Must be “red” in main field
if there are in the main field shows “2 selected” if selected two options: “red” and “green”.
Must be: “red, green”
if there are in the main field shows “5 selected” if selected all options.
Must be: “red, green, …”
IMHO
Great work, but a detailed documentation about retrieving the selected Elements could have made this widget a little easier to use
hi! nice work… would be nice to have the possibility to limit number of selections. for example: select maximum of 6 elements of all.
bye, marc
Eric – Very nicely done widget! I will plan to use this plugin in the future release.
I have a button “reset all” that I use to have the user reset multiple dropdowns on my site. It works by looping through all the checkboxes in all the controls and setting them to “unchecked”. The problem is that it doesn't reset the text of the control's textbox to the default “Select Options”; the list of whatever was selected remains in the textbox.
How can I reset that manually, if at all? Or how can I fire the event that makes the control think that it's time to reset the text to the default text, as if “Uncheck” was checked or all the checkboxes were manually unchecked?
Great plugin! One thing that I like about LaViska's plugin over yours is the ability to use the keyboard to quickly go to an option. For example, if I type “S” it will automatically select the first option starting with “S”. This more closely emulates a traditional <select> element. Is this something you've considered adding to your plugin? Regardless, I still prefer yours with the theme-roller support. Thanks!
How do I programmatically check and uncheck an option?
Perfect plugin. I've spent all night looking for something like this. I was about to start coding my own until i come across this.
Thank you so much!
Perfect plugin. I've spent all night looking for something like this. I was about to start coding my own until i come across this.
Thank you so much!
Awesome plugin, thank you! It gets slow with large lists though.
The list get really slow to use when you have some 500 – 1500 items in the list. Internet Explorer 8 is extremely slow taking 2-3 seconds to check/uncheck and open/close the list. Firefox is better, but there is a noticeable delay.
Tested with jQuery 1.4.2 and UI 1.8.2.
Any optimization ideas?
I found a bug in this control. When I select multiple items and then do a postback, only the first item in the list I originally checked is selected anymore? Why is this happening and how do I fix it?
Sooo great ! Many thanks Eric.
But is there a way to add or remove an option ? or as already someone mentioned to populate it via an ajax request ? (a bit more extreme…)
Hey folks,
I just released a jQuery UI port of this widget over here: http://www.erichynds.com/jquery/jquery-ui-multi...
It's basically the same thing built on top of the jQuery UI widget factory, but it addresses many of the outstanding issues brought up here, including:
- speed: uses event delegation instead of direct binding for larger lists.
- effects: use jQuery UI effects to open and/or show the menu (if you want to use them).
- methods: programatically open, close, update, etc. the widget after it has been initialized.
- events: bind to events using bind() syntax
…and many other bug fixes/improvements. I will still be maintaining this plugin as well, but please feel free to give the other widget a whirl.
thanks!
This plugin works with asp.net ListBox control?
for example:
<asp:ListBox ID=”InsertYear” CssClass=”multiselect” runat=”server” EnableTheming=”false” Rows=”5″ SelectionMode=”Multiple”
Visible=”False” Width=”120″></asp:ListBox>
Very very nice Eric. I've been watching this plugin grow for a while now, very glad to see that you keep making it even nicer. I'm checking out out the jquery-ui version now.
I am running into a z-index related bug in IE 7.
If you have multiple “multiselects” stacked one above the other in a form, the dialog renders behind the closed state of the non-open multiselects.
How can I preselect values, based on data from database?
Also, by default, the first value in the multiselect is checked on page_load. How can I get this resolved?
Thank you.
Very useful plugin ! Is it possible to add option on onOpen event ?
thanks for this great plugin, but what about validation, i am using basistance validate plugin, but the usual validation job for the selects doesnet work for this plugin, any idea how can i get validate the input. i need at least one option checked, thanks.
use the newer version of this plugin, http://www.erichynds.com/jquery/jquery-ui-multi..., and check out this demo: http://www.erichynds.com/examples/jquery-ui-mul...
hi again, with the new plugin and inspiring from the codes in “Max Checked Test” sample, i managed to validate successfully, thanks
Great plugin, works perfect.
I've a small problem – the first value in the drop-down is always selected. I am binding data and even though the first value isn't supposed to be checked, it's always checked.
How can i select a few options on document.ready() ???
thanks for your answer!
Can multi-select have auto complete control feature? Meaning if we have a 100+ items in the list. We must go throw 1 by 1, thus if this control can search then show only the matching, it can filter all unrelated items.
Hi, your plugin is cool. when I am using Jquery js file directly it works. But if i use jquery of inbuilt in Richfaces it is not working
. To use it in richface I called it using hte jquery(“#id”).multiselect(); it is not working.
Other than that it works cool… Could you please let me know is there a way to use it with the combination of richfaces(JSF)
Hi, cool widget! It looks like the selectedText doesn't reset when the form is reset.
this is awesome, been trying to find a good script for ages!
Its workd in I.E. 8? Im testing in firefox and OK but I.E. 8 not works? Someone have solution?
Any chance we can have an update method in this version? it works a treat in your jqueryUI version but unfortunatly I can’t upgrade this project to jqueryUI1.8 yet.
Or
Is there a way to tell it to update the header after I have programmatically checked/unchecked some options
hello,
i need a function to check/uncheck all options. I’m a newbie on this topic, and I’ve already searched on Google several hours, but I couldn’t find something useful.
maybe someone could help me?
greets,
kevin
I have $(“#study_country”).bind(“multiselectclick”, function(event, ui){ …. }); and inside of this click event I would like to close the dialog box, how can this be accomplished?