Select2: Multiple select (checkboxes and/or toggleStates)

[danjme]

Is there any intention to incorporate a standard multiple select drop down with checkboxes / toggle states at any point? - Specifically like this -> http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

It would be nice to have as a core option without hacking around the formatting with injected checkboxes and custom event handlers to catch the behaviours needed with the current select2 library.

Cheers,

• D

[ivaynberg]

you are welcome to provide a pull request and if it doesnt make things too messy i may commit it. the main problem, and why i have not done it yet, is that select2's primary usecase is working with large remote datasets - so checkboxes do not really make sense.

[danjme]

I figured as much :)

It would be straight forward to implement a toggle / checkbox based multiple select by default but keeping it clean with the current multiple select class might be a little trickier, I'll put a request through, the simplest solution would be to supply a set of secondary arguments in a data attribute to define the type of 'multiselect' you would like with the way the script is currently written :)

I'll have a dig at work tomo.

Cheers,
Dan

[natorojr]

@danjme Did you ever give this a shot?

@ivaynberg First and foremost, I love Select2. Great work. It's hands-down my dropdown library of choice.

Though I understand your reasoning for not having implemented checkboxes up to this point, this seems to be a very common request/inquiry from your users (I found at least 5 references in the issues).

I too would love to see checkboxes added to Select2. I've been forced to switch to Eric Hynd's multiselect widget on a number of consulting projects, simply because the client decides checkboxes "make more sense" for them. Don't get me wrong, Eric's work is great also, but if I'm already using Select2 everywhere else on the site, having to switch to a different library (just to have checkboxes on a couple of drop-downs) is quite the inconvenience and time sink.

So, even though it doesn't necessarily align with the original use-case, I strongly believe checkboxes would be both a practical and convenient addition to Select2.

Having said all of that, I completely understand that this is easier said than done.

How much complexity would this add?
Is it a huge development effort?

Lastly, is this something you would consider doing if I could gather up some funds to make a small donation to the project?

Thanks and best regards!
-Nestor

[homer2]

I agree. My users are using it to filter data and they sometimes want to be able to select 10 items or more. I've had to use Eric Hynd's multiselect in cases like this because Select2's tag style is too bulky for more than a few selections.

[danjme]

I did customise the select2 library to support this, I'll submit a pull request to submit my contributions

Sent from my iPhone

On 23 Aug 2013, at 16:03, "homer2" <[email protected][e-mail]> wrote:

I agree. My users are using it to filter data and they sometimes want to be able to select 10 items or more. I've had to use Eric Hynd's multiselect in cases like this because Select2's tag style is too bulky for more than a few selections.

—
Reply to this email directly or view it on GitHubhttps://github.com/ivaynberg/select2/issues/411#issuecomment-23167664.

[Bramanga]

I would definitely like to have this feature.

[rnchris]

Any updates on this pls?

[homer2]

@danjme, did you ever submit the pull request?

[renatomestre]

@danjme Do you need any help to implement this issue? I'm really in need of it. Should I start to do by myself or have you alredy started? Tks.

[zippo445]

@danjme same as above. I'm a great fan of select2 and need to implement that exact functionality... can you submit your code? I would also be available to help implement it...

[florent-mabille]

@danjme +1 for this pull request

[emendelski]

+1

[dietrichg]

+100000

[bobbymiller]

+1

[barrykeenan]

+1

[raulgomis]

+1 check https://github.com/ivaynberg/select2/issues/2686

[kevin-brown]

Throwing this in the list for 4.0, which should make it considerably easier to implement as a plugin.

[raulgomis]

Sounds good!

[homer2]

I'm excited about the prospect of this being implemented, thanks guys!

[vakopian]

For people who still want the checkbox list functionality in the current version (before 4.0), I managed to have it working. This version has checkboxes as images, but I'm pretty sure it can be made to work with real checkboxes with some tweaking. Check it out: http://jsfiddle.net/6dd2gj8d/3/
Note that this is using the closeOnSelect: false setting, and because of #2783 the highlighting/selecting with the up and down arrow keys doesn't work in the current version

[homer2]

Has this enhancement been implemented? I'm looking at Version 4.0.0-beta.3 and I don't see it.

[kevin-brown]

This is possible to do now by either styling selected options ([aria-selected=true]) or overriding the resultsAdapter and adding some more logic when rendering the results.

[dipti-s]

Has this enhancement been implemented? Can anyone tell how to use this enhancement.

[wasikuss]

Hi, take a look into this: http://jsfiddle.net/wasikuss/cg1zr4zd/
I know that function onSelect is broken, but it is ok for simple usage :)

I'm going to finish this and make fully compatible plugin that adds new functions without altering default behaviour.

[Bruddles]

@kevin-brown are there any examples of overriding the resultsAdapter? I've looked in the Docs and the Forum but i can't see anything.

[alexandernst]

If this is still a thing, can this issue get reopened? And if not, can you clearly say so?

[kevin-brown]

Looks like you can get half way there without a custom adapter by just overriding the template for results.

http://jsbin.com/wezudobake/1/

[alexandernst]

Nice, but it would be great if we could get some extra features as

• grouping (category1 with some sub-elements, category2 with some sub-elements, etc..)
• selecting multiple sub-elements with a single click on their parent (group)
• (un)expanding groups (show/hide all sub-elements in a group)

Basically, something like this

[homer2]

@kevin-brown, in your example of overriding the template, if CloseOnSelect is set to false, clicking outside of the checkbox will select the item but not check the checkbox.
http://jsbin.com/tifuzikimo/edit?html,js,output

Also, the templateSelection is still tag based. That is fine for a few items, but when dozens of items are selected it could be too much. Showing a summary instead would be nice, like "21 of 100 selected".

erichynds jquery-ui-multiselect-widget takes this idea a step further by showing either the selected items or the summary based on the number of item selected: "Alabama, Florida, Georgia" or "48 of 50 selected"

Anyway, I think @wasikuss's example is the kind of functionality were looking for.

[PlippiePlop]

@homer2 the example from @wasikuss is a nice example but is not going to work on multiple select boxes on the page selected by a class. The code needs some alteration for multiple select boxes.

See this fiddle:
http://jsfiddle.net/mL44s7rr/

[wasikuss]

@PlippiePlop,
It also work on class-selected elements

http://jsfiddle.net/wasikuss/gx93rwnk/

[PlippiePlop]

@wasikuss ah I see what I did wrong. Thank you for the insight ;)

[zlatevbg]

+1

[tomsommer]

+1

[fmluizao]

+1

Any news on this?

[nxtpl]

+1
Please integrate the checkboxes into main version, the tags are useless with lots of elements selected

[wzrigui]

+1

[claudioredi]

+1

[alexandernst]

For anyone coming here from google and/or interested, check https://github.com/alexandernst/angular-multi-select for a good multi select.

[stevenbriscoeca]

For anyone that would want a simple CSS solution to this :
http://codepen.io/stephenbe/pen/zBrzYP

Just change the background color to a background image of a checkbox.

Cheers

[atomical]

@wasikuss did you ever make a plugin for this?

[wasikuss]

Ok, I see more and more ppl need that plugin. I will post link to plugin when it's done ( 2 - 3days ).

[kuz30]

+1, tags are not needed in every case. Moreover, fast group selection is desired too.

[Ezyweb-uk]

+1

[wasikuss]

https://github.com/wasikuss/select2-multi-checkboxes
Please try and feel free to report any bugs/features.

Cheers

[floriandotorg]

+1

[Ezyweb-uk]

The select2 that I'm converting to multi-select includes an up/down arrow on the far right, a magnifying glass search icon on the far right in the search input box, and a scrollbar on the right of the dropdown.

Is it possible to incorporate these three styles into the third 'select2-original' option please?

[wasikuss]

just remove line 44 in select2.multi-checkboxes.js ;)

[Ezyweb-uk]

Setting minimumResultsForSearch: 0 shows the search box for the first 2 dropdowns which is nice, thank you. However it doesn't change the 3rd option where the selected names appear at the top. There seems to be a search box there without border, it would be great if the border, magnifying glass image, up/down arrow, and vertical scroll could be incorporated into the 3rd layout option.

The select all option shown here taken from here was a very useful addition.

[zenzei]

Hi @wasikuss , was checking your plugin and it's almost what I need but i see it's working with select2 3.5.2. Did your ever upgrade the code to v4?
Thanks in advance,

[zakamik]

This issue is closed- has it been implemented already?

[vasilp]

Great,
This was what I was looking for also.

@zakamik Yes, repo is here:
https://github.com/wasikuss/select2-multi-checkboxes

[WillemOpperman]

For those who are still looking for a solution, have a look at my fiddle.

I have used a couple of fiddles posted about the question and combined it all into 1

Not perfect, but it works.

https://jsfiddle.net/Lkkm2L48/7/

[PlippiePlop]

@WillemOpperman works great, but only issue that it does not work when you have multiple selects on the screen. it should work with multiple selects on class or id base. See https://jsfiddle.net/nzfhkfuk/2

[gridphp]

@WillemOpperman looks good except it always jumps to first selection each time you select.

[frzsombor]

@kevin-brown @alexweissman I still think this shouldn't be closed, and should be implemented officially. The select2-multi-checkboxes has issues, and dev is not responding. So basically this is still unsolved after years, which is so sad, because select2-multi-checkboxes almost solved this issue perfectly with only ~70 lines of code. Anyway, thanks for trying to keep the project alive!

[wasikuss]

sorry for late response but it is already done. This time properly - less ugly hacks that previously broke partially select2 API.

https://github.com/wasikuss/select2-multi-checkboxes/tree/amd

[mota57]

so the feature was requested but the case was close to use select2?

[nguaman]

+1 !

[muhammedkaraoglu]

That's how I solved this problem.

https://jsfiddle.net/akwud47t/1/