wenzhixin / multiple-select

A jQuery plugin to select multiple elements with checkboxes :)

Multiple Select

Multiple select is a jQuery plugin to select multiple elements with checkboxes :).

To get started checkout examples and documentation at http://multiple-select.wenzhixin.net.cn.

Examples

• http://multiple-select.wenzhixin.net.cn/examples
• http://multiple-select.wenzhixin.net.cn/vue-examples
• http://multiple-select-live.wenzhixin.net.cn/

Changelog

CHANGELOG

LICENSE

The MIT License

multiple-select's Issues

how to add new options on page load

Hi,

I am looking for multiple-select-> filter 1 style control.

i just downloaded the code and trying to implement. but i couldn't get the way of adding dynamic values into the select control.

Please help me out.

NR

overrideButtonText option not documented and not added to defaults

I see that setting 'overrideButtonText : true' is possible to show 'selectAllText' when all options are selected.

This option is not documented and also it needs to be added to '$.fn.multipleSelect.defaults' as a default ( set as true for better user experience)

Thanks.

Conflict with hidden divs

I am having some problems with hidden divs.

If I put the code in a undisplayed div (style="display:none;), when I display the div with a button, the box of the drop list appears but there is no option inside.

If I put the code in a displayed div(style="display:block;), it works perfectly.

Does anyone know how to solve this problem? Could it be because jQuery just runs once?

Thank you

Need to position the Multiselect widget

In some cases i need to position the widget in top or center of the select element otherwise the widget options goes under the parent content or browser available area

This is a great plugin and if u can include this option, it would be more better...

filter&select problem

I've encountered a problem, using filter and select group of items. After i used a filter to find an item and got 0 result, i pressed on the item group, since 0 results is still showing a group title. So i closed the dropdown and it ends with a selected group and zero items selected. That confused me.
There are possible ways to get rid of this problem.

1. when theres 0 results found hide the groups.
2. make them uncheckable ('dont like this one' looks wierd).
3. add groups to the filter also, so i can find a group and select all items there (this one i like)

How to mark some option

I need some color mark some of the option.

Select All & Filter

Maybe it's better to select only visible (filtered) items by checking "Select All" in the filtered list? What do you think?

Can width option take a percentage setting?

Setting the 'width' option to a percentage does not work for me. Can this plugin use percentages for the width. e.g. {width: '50%', ...}. That would be really nice to have.

Multiple Selects On a Page

Is is possible to apply this functionality to a single select control on a page rather than all of them?

Can you pass in a control ID and just convert that one? Or set a class on the select controls you want converted?

working slow with ie and chrome, where as working good with Firefox.

hi all,

taking much time to respond when i click on dropdown list in chrome and ie.

where as responding properly in Firefox.

Please let me know if i need to submit any other details on this.

Thanks for your help in advance,

Image is not shown in Firefox 25.0.1

The drop down image (png image) is not displayed if more items are selected in Firefox. The image is visible in Chrome & IE 9 (Compatibility View).

Add maxHeight option and callback events.

IE 10 Compatibility Issue

I have used two dropdowns in two different TR and same column level. When my website is opened in IE 10 Compatibility Mode First two values of first dropdown get hide behind second dropdown. Is there any Solution?

Problem in ie8

Hello,

When I load the page with multiple select in IE8, the page takes too long to load. In any other browser no problems. This component is tested for this browser. Is it possible to fix it?

A greeting.

The Filter1, The Filter2: not working

Hi,
thank you very much for this great plugin.
I tried filter: true in a multipleSelect and it's not working (the search field is here, but no filtering). I tried on your demo site and with different browsers, it does not work either.
Could you check this, please?

Hope to support the select element's onchange event.

If select is binded change event like below:

<select onchange="fn()">

or 

 $('select').change(fn)

The change event won't fire after using multiple-select.

Hope to support it.

Make multiple-select only to a specific dropdownlist

when added this plugin into my project, it affected all the dropdownlists in my project which is not desired.

How would I resolve this issue?

radio buton

Please could your great multiple select be with radio buttons too? Sometimes only one item must be selected a it would solve this problem.

thans

Where is the download??? Can not find it.

An option to display optgroups names instead of list of options in the title

I think that it also can be useful to have an option to display optgroup names instead of list of options in the title, when the whole groups were selected.
For example we can turn this:

into this
[Group1], [Group3]
instead of "Option1, Option2, Option3, Option7, Option..."
Optionally, it also can be displayed in the following way:
[Group1: Option1, Option2], [Group3: Option7]

hide() method

Please could you add hide() method f.e. I have The Single Row options and after event onClick I would like to hide multiple select (like the default behavior of select in browser)

onCheckAll & onUncheckAll not fired when displaying filtered options

When we use filter to display filtered options, currently clicking on 'Select All' seems cannot trigger the onCheckAll & onUncheckAll events.

Optgroups support

First of all, thank you for great plugin!
Does it support optgroups?

Selected values posted to server have duplicates.

I am using the code from fix #22 that fixes the filtering with optgroups error but when I post to the server I am getting weird values.

If I select the 4 items with the values [1, 2, 3, 4 ], the values I get on the server are [1, 2, 3, 4, 2, 3, 4].

When I look at the html after I select items the items in the original multiple select control are not selected and also the checkboxes in the plugin created html are also not checked.

The server is getting the correct values somehow but I am unsure as to why it posts a set of duplicate values starting at the second item.

I am using ASP.Net MVC and I simply capture the selected items using a string array of the name attribute on the original multi-select.

Add option to allow only single select

Add a property( for example: allowMultipleSelect) that allows you to select only one option. The value of this property should be by default true(as the name of the plugin suggests).

Help me

Jquery
please
http://upanh.in/lzy.jpg
tks

Reset the selected items

Can you add a feature to reset the selected items programmatically. It can be useful for single page web apps where you need to reset all fields after ajax commit.

How to define the width of the button element?

How can I define the width of the button element?
Thanks!

Optgroups as columns

It's not an issue. I think this can be a good idea to have a possibilility to display each optgroup in a separate column
for example we can turn this:

into this:
Group1 Group2 Group3 Opt-11 Opt-21 Opt-31 Opt-12 Opt-22 Opt-32 Opt-13 Opt-23
I think, it can add additional flexibility and in some cases it will be easier to read

Responsive ms-drop / optgroups

Hi,
Your plugin is really cool thanks for your work! :)

There's one thing I could not achieve, maybe you can help me...
I'd like to have a "responsive" optgroups ul, that is, when the screen becomes too small, that the ms-drop / the optgroups li adapts its width and the optgroup elements "float:left" instead of being hidden....

Do you think that would be possible?

Can we search?

If there is a long list of options, it's a bit difficult to scroll down and find the item. Is there a way to search?

Changing names of chechboxes

Hello,

I tried to pass a variable from the options in order to change this line:

'<input type="' + type + '" name="selectItem" value="' + value + '"' +

As you can see all checkboxes will be named selectItem. Is there a way to change them?

drop down width

I need a way to specify a wider drop down width. The scrolling works but I would rather not have to scroll right and left.

I try setting ms-drop { width: 290px; } but it gets reset to width: 155px; which is the same as the top input field.

Thanks for any help.
Robert

Need two options , 'widthClass' and 'selectItemName'

widthClass could be like this:

          if (this.options.widthClass) {
        var widthClass = this.options.widthClass;
        this.$choice.addClass(widthClass);
        this.$choice.find('span').addClass(widthClass);
        this.$drop.addClass(widthClass);
      } else {
        this.$choice.css('width', $el.width() + 'px').find('span').css(
                'width', ($el.width() - 28) + 'px');
        this.$drop.css({
            width : $el.width() + 'px'
        });
    }

And the hard-coded input box's name 'selectItem' should be configurable so that it can be automatically binded by web framework like "Spring MVC".

List extends beyond viewable window and won't scroll. Has anyone else experienced this behavior?

Not working in jQuery UI Dialog (modal)

I'm using the plugin inside a jquery UI modal. It appears when you check a check box the event fires twice. so it is checked then unchecked. Still adds value to the choice but it looks like the check box was not checked.

This only happens with checkboxes generated by your plugin. I added a normal checkbox and have no issue.

Also, it appears to be related to the modal. If I turn off the modal and use the UI dialog the issue does not happen. Seems that the overlay associated to the modal causes the event to fire twice.

Have you seen any issue like this?

Update the selections for dynamically added options

How to update the contents in the dropdown after I have added new options dynamically.

issues with jquery 1.9

setSelects doesn't work in Firefox when using jquery 1.9. Works fine in Safari. Haven't tested other browsers.

Select all enabled by default

I would like to know how to set "select all" enabled by default on page load.

Allow search through checkbox items

When there are to many items would be great to search through the list

No scrolling on android/iPad/iPhone (Extending Issue #38)

This plugin is awesome and I would very like to maintain it on my client's application. The problem is that scrolling is not appearing on select boxes on android/iPads/iPhones...

Can this be resolved?

Message No results Found

Hi,

It would be possible to add a message when there are no results found?

Distorted View on Mobile Browser

Hi ,
The checkboxes get distorted when seen on Mobile Devices.
Please help on the same

OnClose event continues to fire?

When creating an onClose event every time I click on the screen that event fires Shouldnt it only fire when the actually drop down closes after opening?

$('#DivisionAssigned').multipleSelect({
onClose: function() {
alert('select Closed')
}
});

Hope to add an focus or highlight method.

Hope to add

• a focus or highlight method
• an unfocus or unhighlight method.

Sometimes, i need to highlight the select to guide user to re-select.

onClose method double raise.

I'm using the onClose event using simple function with one and only console.log(123)..And what i get in the console on closing the dropbox using a click is:
123
123
I've used breakpoints on close event in your plugin and the browser stops on each point which means close event is raised 2 times (lines 44 and 150 in ver 1.0.5).
Dont know if its a bug or a feature :)
Can you please explain the behaviour?

How to do onblur?

I want to check whether the multiple select is null on onblur and if then show an error message that at least one option should be select, but when i tried .blur() on it's not working. how can I implement onblur in multiple-select?

Add keyboard support

Add option properties(selected and disabled) support.

multiple-select/#the-filter1

multiselect was working but i'm not able make filter in the select.
->how can i solve that
If I want to use this what is the html code i want to use.