Multiple item select box without jQuery dependency

[Ilan Firsov]

I’m working on a project where I have a huge list of items in a <select multiple> element and the user can select any amount of items (cities and towns).
Usually I’m working with Chosen or Select2, both have a nice way to handle multi select, and both require jQuery to work.
This time I don’t really need jQuery anywhere else in the project and I’m looking for a new plugin that doesn’t use it to drop jQuery entirely. Any ideas?

[Jerba]

Hi Ilan,

I don’t how how extravagant you want it to be, but you can probably write the functionality yourself, it’s relatively straightforward. Here’s a quick pen which should help you get started.

http://codepen.io/Responsive/pen/dMvMLj

I hope this was helpful.

[Ilan Firsov]

Thanks for your input, but that implementation is not really user friendly.
I was thinking maybe something like this. It’s simple enough to build on my own, but then again, it’s only going to appear on one page so maybe using jQuery plugin is not that bad?

[Jerba]

No problem, although it was never meant to be user friendly, I was just trying to demonstrate the basic functionality.

The pen above stores the selected values in an array so you can do what you want with them at that point, pretty much you just need to add a few lines of code to provide the ability to remove a selected item if so required and that’s probably it.

http://codepen.io/Responsive/pen/dMvMLj

“it’s only going to appear on one page so maybe using jQuery plugin is not that bad”

That’s up to you, however, including an entire library for the use of one function seems incredibly overkill, especially considering the functionality you’re referring to would be no more than 50 lines of Javascript if you were to write it yourself.

If you were to use the example I gave you above, then you can simply manipulate the array values as you please and then post the entire array to where ever it needs to go.

[Author]

Posts