Skip to Content

jQuery Multiselect list plugin

Sat, 08/29/2009 - 04:22 — sgrover

We've all seen the usual HTML select lists. Something that looks like this:

This is ok, but looks clunky and gets to be annoying if you do not know about holding down the CTRL key to do multiple selections. More importantly, you can never list anything other than text - you can't add helpful icons or more elaborate HTML elements if needed. Instead you're left rolling your own solution.

This is such a common thing that there are any number of sites that tell you how to do it. I went looking for a jQuery plugin to do this for me. There are some out there, but were a little too restrictive for my needs. So I rolled my own. I call it "jqDivList".

Download

Sample

One
Two
Three
Four

Click each of the elements to toggle it on/off.

Usage

  1. Include jQuery on your page as per normal - via a <script> include.
  2. Include the jqdivlist.js file in the same manner
  3. Create your element that will contain your list. Usually a div.
  4. In your $(document).ready() function, call the divlist() method:
      $("#thelist").divlist();

The .divlist() method can take an object containing two configuration parameters:

  • multiselect - true/false - indicates if the list will allow only one, or multiple selections. Default is "true", indicating multiple selections.
  • selectClass - string - indicates the name of the class to assign to items that have been selected. Defaults to "selected".

Getting the selected items:
To find the selected items, call the .divlistValue() method on your list element:

  $("#thelist").divlistValue();

This will return the ID(s) of the selected element(s). An array is returned, even if there is only one element.

Look and feel of the list is up to you.

I typically do a DIV that contains child DIVs. But the plugin is built such that the the container and child elements can be whatever you'd like. And the child elements can be as deep/complex as you'd like. You'll have to experiment to see what works best in your case. View source of this page, and search for 'div id="thelist"' to see how I built the list.

License

This is licensed under the Creative Commons Attribution-Share Alike (http://creativecommons.org/licenses/by-sa/3.0/) license. Use/abuse it as needed, within the scope of that license.



Theme by Dr. Radut.