ehynds / jquery-ui-multiselect-widget

jQuery UI MultiSelect widget

jQuery UI MultiSelect Widget

MultiSelect progessively enhances an ordinary multiple select control into elegant drop down list of checkboxes, stylable with ThemeRoller.

Demo Page

Check out the demo page here!

Version 3

Version 3 of the widget is available. This introduces a lot of new features and substantial performance imrovements.

Check out the release notes for an exact list of changes and see the wiki for the information you may need to switch over. The main wiki will be getting updates for the new features and changed options.

Requirements

The usage section of the Wiki specifies the widget's dependencies.

License

MultiSelect is dual-licensed under the GPL 2 license and the MIT license.

Contributing

When submitting a pull request, please describe the change you are making - preferably with a use case. Unit tests are now (14 March 2016) required for the pull to be merged.

Please do not submit minified code in your pull request, that tends to cause merge conflicts.

You can test the demo pages locally by navigating to the docs directory and running bundle install && bundle exec jekyll server.

jquery-ui-multiselect-widget's Issues

Problem with validation (check) only in the version 1.6

Hello,

In few days I signal you a problem with the validation check. You ask in the page of project, that in the 1.6 it fixed but not.

Here's an example that not work with version 1.6. I prefer to give you all

Here : http://paul.borel.free.fr/erreurMultiselect.zip

Thanks

filter: show header even if it's off

from the comments:

"A small issue with the 1.7 version and filtering - now if we have multiple == false the header will never show up, so even if we use the filter addon it will never show up for a list of radio fields.
Instead we should only hide check / uncheck all links if multiple == false not the header (line 157). "

change arrow icon

... to .ui-icon-triangle-2-n-s

investigate close event

from Ilya Tretyakov - The "close" event may be attached only in the initialization. No one "someTing.bind('close',function(ev,ui){..." do not work.

Filter doesn't work -cache isn't created- when using optgroup

Hey Eric,

First of all, thanks a million for such a great plugin!...

After working with it for a while, I needed to filter using optgroups and discovered it wasn't working properly. The main reason was that the cache wasn't being built.

I've proposed a fix that you'll find here dariocravero@5cee8ff

I tried to create a test case for it but just didn't have the time to do it. However, the test case should be something like:
given a form with a multiple select containing a few groups like this:
Group: "aa":
Options: "aa1", "aa2"
Group: "bb":
Options "bb1", "bb2"

if I filter by "aa",

I should get the list of fields "aa1", "aa2"

Cheers,
Dario

Missing comma in jquery.multiselect.js

There's a missing comma on line 44: title = el.attr('title')

Regards,
Marcus

multiple:false and IE7

Setting multiple:false to create a list of radio buttons was rendering the radio buttons unselectable in IE7. Adding a name attribute to the inputs seemed to work.

I changed:

"type="'+(o.multiple ? "checkbox" : "radio")

to:

"type="'+(o.multiple ? "checkbox" : "radio" name="multiselect-radios")

Filter doesn't work after refresh

When running the new method 'refresh' I noticed that the filter plugin stopped working.

Add option for an additional class

much like the dialogClass option in UI dialog

Should be positioned in its own layer

If you create a multiselect at the bottom of a widget, when you open the multiselect it just makes the widget content longer and you have to scroll down to see the multiselect options. Instead, the dropdown should be created at the root of the DOM and absolute positioned to be below the element (or differently if the position option is passed), and the zindex of the dropdown should be set by calling $(element).zIndex() to ensure that it's at the same layer as the dialog.

optimize .closest("foo") calls with $.contains()

selected options are only retained on the first multiselect

all subsequent multiselects drop their selected values on page refresh in at least FF.

charCode -> which

"when I try to write something in the filter I get a warning : 'The 'charCode' property of a keydown event should not be used. The value is meaningless.'"

Missing # in href check all/uncheck all

When used in the ui dialog these lines causes the dialog to close

html.push.......href="".....

changing the href to include a # sorts the problem:

html.push......href="#">.........
html.push......href="#'>..........

doesn't play well with the validation plugin

need to find a solution other than detach() on the option tags.

checked items after filtering and form suibmission

from the comments:

"Hello, i'm having a problem with the filtering plugin and i can't make it work right. When you search something and insted of clicking to check the result you choose to click "check all" and then send the post to the server, when it comes back, all items (even the ones that were shown 'cuz of the filter) returns checked."

first selectbox is reset after refresh

The first selectbox does not remember selection after page refresh.
When i have more then 1 selectbox on my page, all but the first one remember the submitted values on page refresh.

To replicate the bug: place one selectbox (or more) and a submit button on your page. Select values X and Y. Press submit and make the new page set option values X & Y selected="selected". Reload your page. The first selectbox always resets it selected values.

filtering not working for optgroups

cache isn't being created

Single select shouldn't show "Check all" and "Uncheck all"

As the title says, when using single select {multiple: false} the "Check all" and "Uncheck all" links shouldn't be shown as it doesn't really make sense.

refactor widget creation to use jQuery's API

right now html is created with a string and then joined together. using the jQuery API is inline with how the official widgets are created

Compatibility issues with validate plugin

There seems to be some compatibility issues with the validate plugin: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

It does work with the lastest version of validate, but not performing as good as without. Also, jslint is reporting that trigger isn't properly called. Don't know if this error is with validate or with multiselect.

checked="checked" not working must use selected="selected"

the title describes i guess the problem

checked="checked" not working must use selected="selected"

selected="selected" works for radio, checkbox.

Req: On Radio Select Option to Close Drop Down

When an Radio is in play and we allow only 1 item to be selected can we have an option so we can hide (close) the drop down because either way they cant select anymore...

Firefox doesn't retain multiselect (with optgroups) values on page refresh

Firefox doesn't retain multiselect (with optgroups) values on page refresh. Basic multiselect works like intended (view demo on the blog post).

Broken in 1.7 in Chrome: creating multiselect with multiple=false and an option already selected

I just upgraded from 1.6 to 1.7, and noticed a bug that appears in Chrome for Windows but not Firefox (dunno about others). Basically I have a select with five option's, and one of the option's has selected="selected" set. I initialize the multiselect on that select, with the flag multiple: false. In v1.6, this worked beautifully, and the one selected option had its radio checked and name appeared in the button. But in 1.7 in Chrome, the selected="selected" is ignored, and nothing is selected. The same page viewed in Firefox works as expected (and as 1.6 works now in both pages, after I just downgraded).

Add third-state support

At the moment an option can only have 2 states, selected or not. Options could have a third state (using an 'x') which would imply exclusion. Then one could select option A but exclude option B by clicking option A once and clicking option B twice (to get the 'x' instead of the tick symbol).

This functionality could be optional.

Position issue

Hi

I have an issue with multiselect.
For some reason it doesnt position it self correctly - see screenshot here http://dl.dropbox.com/u/2111180/multiselect.png

I tried with both multiselect() as well as multiselect(opts) where opts is just a dict with my swedish translations, nothing more.

If you need any info about my css just let me know.

Thanks

namespace events

header doesn't show on single selects

filter click event

clicking on the filter input box apparently is firing multiselectclick

filter: hide optgroup label if no children match

stacked menus in IE

apparently if you open a multiselect that is stacked on top of another, the other's button bleeds through the menu in IE 7 and 8.

Close Event Triggers Twice

When clicking outside the checkbox menu the close event triggers twice due to the click event created on line 254 (http://github.com/ehynds/jquery-ui-multiselect-widget/blob/master/src/jquery.multiselect.js#L254). This click event also triggers twice when a checkbox is clicked.

manually triggering a click event

After a clean init, running this code the first time:

$("select:first").multiselect("widget").find(":checkbox").trigger("click");

will correctly check all boxes and fire necessary events, but running it a second time leaves "1 selected" as the button value

min.js is outdated

You've fixed webkit issue, but minimized version is older than that fix.
Maybe it would be better to run minimization with git-hook or some other automation method?

support dynamic "header" option change

Filter allows RegExp patterns

The filter allows for RegExp patterns. In IE8 this produces errors. Enter in a backslash (/), or bracket ([]) to produce the JS error. The filter should escape the entered terms appropriately.

Refer to the bottom of this page for a quick fix - http://simonwillison.net/2006/Jan/20/escape/

    --- jquery.multiselect.filter.orig.js   2010-12-03 11:16:07.793560000 -0600
    +++ jquery.multiselect.filter.js        2010-12-03 11:18:42.518315000 -0600
    @@ -87,6 +87,7 @@
                    } else {
                            rows.hide();

    +                term = term.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
                            var regex = new RegExp(term, 'gi');
                            this._trigger( "filter", e, $.map(cache, function(v,i){
                                    if( v.search(regex) !== -1 ){

Cannot set noneSelectedText to ''

Trying to empty the noneSelectedText by specifying '' or "" results in this error:
'this.button.contents().1' is null or not an object

Mouse click on span tag (noneSelectedText) doesnt open dropdownlist in Chrome 6.

Generated markup jQuery MultiSelect UI Widget 1.3 (works):

Välj månad..

Generated markup jQuery MultiSelect UI Widget 1.4.1 (breaks):

Välj månad..

Problems with <input type="reset" />

If you have a form containing a button input of type "reset" the plugin has a couple of problems:

• Text specified by selectedText and selectedList don't get updated to reflect the change in state.
• In a single select, all of the radio buttons get cleared instead of selecting the first in the list or which ever has a selected attribute.

There may be other issues but these are the two I've come across in my testing so far.
Using version 1.5 in Firefox 3.5.10.

selectedText doesn't work

selectedText doesn't seem to work with the current build. It doesn't trigger at all.

Edit: After further investigation, it seems that this is because _toggleChecked does not trigger.

Using jQuery 1.4.2 and UI 1.8.2.

manually triggering a click event

trigger("click") on the checkboxes doesn't work right for a selectList - it only takes the first one. It does work when click() is triggered on the input itself, see http://jsfiddle.net/ehynds/z7ptm/

max checked w/ optgroup toggle

"When you click on the OptGroup heading, all options in the group are selected, which is a nice touch. However, selecting options in this way is not caught by the "max checked" function"

filtering plugin and optgroup toggle

clicking on the title of an optgroup while the filter plugin is applied will not select the underlying option tags, in at least FF3.6

values posted when checking items from the optgroup label

from the comments:

Im trying to retrieve the values of the multiselect on the server. It is working great. However there's a problem when dealing with optgroups.

If the entire list of 20 items is not checked, and i clicked on an optgroup that contains for example 3 items, on the server side all 20 items are submitted and not the the selected 3. However if you manually click on the 3 items one by one without using the optgroup, on the server side only 3 are received.

Is this a bug or am i missing something? Appereciate your help

single select broken

now that the name attr on the inputs has been removed, the single select option is broken

trigger("click") checked items are not counted correctly

Hi Eric

it has been mentioned once in the blog comments and marked as fixed, but it seems to me the problem is still there in the 1.5 release, for example by

var select = 'CH ';
$("#testlist").multiselect("widget").find("input:checkbox").each(function (chkindex) {
if (this.title.indexOf(select)>0) {
if(this.checked==false) {
this.trigger("click").attr('checked', true);
}
}
}

it will report one item less than actually 'x of n items selected'...and will correct itself by any manual select/deselect clicks.

please verify and wish you can correct this, and thanks for such a great extension to the UI collection! :)

Cheers, Paul

clicking on the actual arrow opens and closes the menu

seems to call both open then close?

Filter does not re-create after a destroy

With the following lines of code
$("#state").multiselect({ minWidth: 300 }).multiselectfilter();
$("#state").multiselect("destroy");
$("#state").multiselect({ minWidth: 300 }).multiselectfilter();

The filter will not be displayed when the multiselect is re-created the second time, it will the first time.

I need a "refresh" method

Trying to use this widget with Knockout.js(http://www.knockoutjs.com), so far I was able to update the observed var setting its value on the multiselect click event but when I add some value manually on the observed var the multiselect doesn't refresh to check the correct values.