On art, music, mobile, drupal, stars and planets

Search form

Drupal multiple select jquery test

Note: this code is old, but left here for legacy reasons. The example doesn't work anymore!

You should see 2 multiple select boxes. If your javascript is enabled, you should be able to select multiple options without holding the CTRL button. The jquery remembers those for you. Toggle works fine. If you think you have improvements or experience problems with your browser/os, leave a comment at the bottom. Firefox 2 and galeon on Linux are tested and work fine.

Topics

Comments

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.

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.........

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

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.

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.

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.

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.

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.