We need a library so copy-paste won't be necessary! Good work swentel stront ...

One remark: there is a bug when you try to deselect an item without moving the mouse cursor outside the last selected element (also being the one you try to deselect). If you just move your mouse outside that item's area there is no problem.

Guess what: works fine on Camino, but not on Safari 3... Let's hope Apple fixes this in their final release of Safari.

Nice idea, but why not use checkboxes? It does the same thing and won't be unpredictable behavior to a user.

It's ok, except for the 'blinking' as you make selections. That's kind of annoying.

doesn't work in IE7 on winXPsp2. you have to click around alot before it starts to work, and then it doesn't work correctly.

Nice, but don't really work on Safari 2 :(

Toggling has a bug in FF 2.0.0.7 / WinXP. Go to an item and click 3 or more times. You'll see after the initial select/unselect that it stops responding until you move your mouse.

This code works fine for me. Thanks....

But I was not able to retrieve data from the array.
I found out that there is content in the array print_r(array_values($object)); display content as
Array ( [0] => obj1 [1] => obj2 [2] => obj3 ) Count= 3

but when i tried to echo each value, echo $object[0]; I failed.
Thanks for your help.

Sorry for the trouble.
I don't know anything about jquery and don't know how data is stored in the array. Now i have learned a bit about jquery and found a way to solve my problem.
Thanks anyway.........

Hi there, it's not working properly in Safari 3 beta but no surprise there considering the other comments.

You should really do something about your comment spam. It's annoying to your users because they waste time reading them (like me).

Thanks for your post, now I know to use: if (Drupal.jsEnabled) {}

your work is good , but think on more of an user perspective , a multiple select box with the option of allowing to see all the selected elements in a simple textbox or div , could be much easier for the users to remember wat all have they clicked

It's is still evil.        

The "blinking" as you select and unselect items arguably make this interface more confusing to users than just offering the standard listbox, which at least has the benefit of OS consistency on its side even if users have to know what to do.

There's also no easy way to clear or invert the selection, and in Firefox 3.0.1 at least, toggling doesn't work if you select multiple elements by just dragging the mouse button and then try to toggle individual elements (they'll toggle off then on but not off again).

It's probably better still not to use multiselect listboxes at all. Like Zach said, checkboxes are usually superior. They don't allow easy selection of multiple elements, but they also don't have any of the confusion. If you really think you need multiselect in a big list (so checkboxes won't do) you should think about a redesign of your interface first.

You must move the cursor OFF the element before toggling. To demo, keep your cursor on one element, and click multiple times - if you stay hovered, it will never de-select.

The following pretty solution works only in Firefox and only for click based selections (no click and drag, space bar, etc...)!

$("select option").bind("mousedown", function(event){
this.selected = !this.selected;
return false;
});

In other browsers, you cannot bind the mousedown event to the option element but only to the select parent element. Maybe a workaround can be found here!

The nice thing about jQuery.bind() is that returning false prevents the default browser actions, and thus deselection of already selected elements.

To be explored ...

I've got something cooking here for jQuery. mooTools 1.11 version is complete, 1.2 is on the way, and a port over to jQuery is not far behind. In the next version I will add the ability to not have to use the ctrl key as an option. It would be easy to implement.

Have a look: Select box factory 1.0

Just one word is 'WOW'.Unique idea then normal UI component.If we will think same functionality as component level then we will achieve next generation desktop on web very soon.

Doesn't work on Chrome

awful. so buggy

I like the idea, but it does have issues...the need to leave the menu and come back before each toggle is a bit of a show stopper. At least that's how it's behaving for me in ie7, though firefox 3 seems better.

How to determine the multiple select maximum count?

There is a problem in IE7 with the mouseover trigger insomuch as the focus has to be removed from the element before it can be triggered again...the following code works in IE7:

if (Drupal.jsEnabled) {
$(document).ready(function() {
var selected = new Array();

// safe them when you click the mouse
$('select').click(function() {
// make sure it's a multiple select
if (this.multiple == true) {
for(var i=0;i

Here is my solution:

http://www.scotthorlbeck.com/code/tochecklist

It's a bit more involved, and it's also abstracted from Drupal. But hopefully it gets the job done. ;)

ummm it doesn't work... just acts like two normal checklists

Love the idea. Don't push a Ctrl button up to the face of a user. I tried it on IE, Chrome and Firefox. But from the comments I still don't dare to use it. To bad :-(

Please let us know I you or anyone else manage to solve the bug.

Like this as it works, nearly! Any chance you can figure out a way of the scroll bar auto-scrolling to the last selected item when selected or de-selected items?

Very nice! I have been working on the same problem and came to a similar solution. It has the advantage of avoiding flicker on Webkit and Gecko engines (by using the mousedown on option event) and handles click-drag on all browsers I tested with (this one fails on Opera), as well as better shift-click support. It is pretty similar, but in case anyone is interested, I put it in a project page on our company forge. I hope you find it useful.

There is a problem with the scrolling. This implementation does not maintain scroll position properly.

Here is another simple implementation of the same.
html multi select.