roll your own multiple select listbox
with a standard html select box, you can select multiple options if the “multiple” attribute is set, but you’ve got to hold down the appropriate modifier key (ctrl on windows) in order to do so.
standard html select box
as an aside: it would be interesting to study how many people grasp the modifier-key concept and how usable the modifier key is in terms of time to complete a task and number of errors.
nevertheless “experts” tend to bemoan the usability of holding down a modifier key to select multiple options, and i would tend to agree. so after a little digging around the intarweb, i discovered three alternatives. the first is pure javascript (and less than satisfying) while the latter two creatively use checkbox widgets inside an html div to create a custom select box.
- the pure javascript multiple select box grafts simple multiple selection onto an existing select box using nothing more than javascript. the downside is that it’s very blinky.
- multiple selection using checkboxes is just so neat. but it could be improved.
- dynamic conversion of select boxes into multiple selection scrolling checkboxes, using javascript is brilliant, but also a little heavy-handed.
so let me throw my hat into the ring with a modification on the second example above that mixes in a little javascript to improve the visibility of the selected option and works some CSS magic to perfect the borders.
dude I could select multiples in the top box by dragging… Was that your example?
dragging or using the shift key gives you a range. you need to use the “ctrl” if you just want to select “dime” and “dove”.
ps. it took me a few tries to get all the code working and looking nice within this post, so you might have seen it when it was still a little ripe.
Nice.
In a usability test with South Carolina factory workers, 2 of 30 participants knew ctrl-click.
To solve this, I came up with a checkbox standin for a mutli-select:
http://uzilla.net/uzilla/my/widg…ts/multiselect/
great code for simple multiselect javascript control!!
thanks a ton…it worked great :)
Nice. Users saws directly how to select multiple values
Thanks for the code. I was even able to throw in some asp to preload values to the ones previously selected by the user.
Ben, excellent. I should probably update the style since I realized after the fact that I’d matched the old Win2k style (pixel for pixel) rather than the WinXP style.
Mind if I adapt (with credit) this control for a commercial forms application?
Matthew, definitely go for it, no attribution required, but always appreciated. In fact if whatever you create is something I can link to, let me know so I can add it to the post.
Works great! Very clever.
Very nice! I can see only one usability down-side: It’s much harder now to select all elements, e.g using the mouse. I think that this combined with a “select all” and maybe a “select invert” would excel this script.
how do you validate this select box to make sure at least one value is selected?
great code for simple multiselect javascript control!!
You can also use the code below:
<script> var x = document.getElementsByName("FIELDNAME"); x[0].multiple = true; </script>Hi Justin,
Well, I’m a year+ late on adding my comment but as comments are still open, I thought you wouldn’t mind.
I’ve also come up with a JavaScript widgit to reengineer selectLists (multi-selectLists especially).
A demo is available for all interested parties…
Regards,
Brian
I used your code to create the checkbox multiselect but I cann’t seem to figure out how to submit it to a table it puts array in the field. any suggestions?
Thanks a bunch. Your example worked great, and is being used in my current project!
custom multiple select box is Good!
I want to check and highlight last checked items when it reload.
How do I do?
this thing is VERY cool and will solve a lot of problems that the multi-select just can’t handled.
THANKS !!!
This is just fantastic. I’ve been looking for that script a long time. (De)Select all would just perfect it.
cheers
Greg
How can one use this list box in a Contact Us form, where each selected name mails the form to the corresponding email address?
truthyness, I’d suggest using PHP.
custom multiple select box
Is perfect !!!!
hi,
you can select multiple options without pressing ALT key by using PSPL Multi Select Box.
Please check it out on
PSPL Multi Select Box – select without pressing ALT
its w3c compliant
arrows and box styles can be customized
simple to integrate
it dont add any non-html tags to your markup
Here’s a working multi select dropdown.
http://2whoa.com/dominate/2008/01/multiple-select-dropdown-menu.php
If you use the same name for each of the checkboxes, or if you use the standard multi select option then the output is a set of name&value pairs that you need to deal with. Have alook here http://www.siteexperts.com/tips/html/ts16/page1.asp for more info, the second page has a nice bit of JS to handle this for you.
alternatively if each check box is going to a different field then name them differently and you will have the output in line with that.
great tip though to list checkboxes in a fixed size scrollable DIV – cheers
this is great, thank you for sharing this
How do I copy the custom multiple selext box on to my excel sheet, as you can tell I am not very good with this stuff
Hi, I have managed to implement your html code into php no problems, displaying perfectly. What I can’t work out is how do I get the values of the items selected. I’ve tried
$selection1 = $_POST[“checkbox[]”];
and a few other variants of this, but get no value at all.
steve try this:
$checked_values = $_POST['checkbox']; // this is an array
print_r($checked_values); // prints all checked values
Justin, it worked. Thanks very much for your quick response.
Great example. Thanks for sharing!
Can you have the same list items without the checkbox (still able to select multiple items – but just no checkbox, radio, etc…)
Works Great. This is what i had been Looking for. Thanks a Lot.
Here’s a plugin I knocked together in jQuery for highlighting the checkbox labels. This also has the advantage that the pre-checked boxes have their labels highlighted when the page first loads:
You must ensure that you have a classname called “multiselect-on” in your CSS file which defines how the highlighted labels look.
//
// The function // jQuery.fn.multiselect = function() { $(this).each(function() { var checkboxes = $(this).find("input"); checkboxes.each(function() { var checkbox = $(this); if (checkbox.attr("checked")) checkbox.parent().attr("class","multiselect-on"); checkbox.change(function() { if (checkbox.attr("checked")) checkbox.parent().attr("class","multiselect-on"); else checkbox.parent().attr("class",""); }); }); }); }; // // Simply call with the following: $(".multiselect").multiselect();