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.

Code (Last update July 4, 01:57)

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

   $('select').mouseover(function() {
      if (this.multiple == true) {
        for (var i=0,a=0;i<this.options.length;i++) {
          if (this.options[i].selected == true) {
            selected[a] = this.options[i].value;
            a++;
          }
        }
      }
    });
 
    // 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<selected.length;i++) {
          for(var a=0;a<this.options.length;a++){
            if (selected[i] == this.options[a].value && this.options[a].selected == true) {
              this.options[a].selected = false;
              selected.splice(i,1);
            } else if (selected[i] == this.options[a].value) {
              this.options[a].selected = true;
            }
          }
        }
      }
    
      // load all selected options in array when the mouse pointer hovers the select box
      if (this.multiple == true) {
        for (var i=0,a=0;i<this.options.length;i++) {
          if (this.options[i].selected == true) {
            selected[a] = this.options[i].value;
            a++;
          }
        }
      }
    
    });
  });
}

If you want to add this to your drupal installation, copy paste the code into /misc/multipleselect.js, then add

<script type="text/javascript" src="/misc/multipleselect.js"></script>

into your page.tpl.php. If you want to use it in a non-drupal installation, just leave out the the first (if (Drupal.jsEnabled) {) and last (}) line of this snippet.

Comments

Submitted by Vincent vanderheeren on July 4, 2007 - 09:46

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.

Submitted by Ikke on July 4, 2007 - 09:49

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

Submitted by Mig on August 3, 2007 - 14:04

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

Submitted by fred on September 15, 2007 - 20:42

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.

Submitted by DT on October 16, 2007 - 15:06

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.

Submitted by Naveen P.L. on December 5, 2007 - 06:48

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.

Submitted by Naveen P.L. on December 5, 2007 - 09:28

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

Submitted by Richard Burford... on January 10, 2008 - 22:26

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) {}

Submitted by gopal on February 12, 2008 - 12:35

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

Submitted by JM on August 15, 2008 - 11:35

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.

Submitted by ASh on August 23, 2008 - 01:05

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.

Submitted by Besnik Selimi on September 10, 2008 - 03:15

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

Submitted by Chirag Suthar on November 18, 2008 - 06:31

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.

Submitted by daniel on January 11, 2009 - 02:31

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.

Submitted by cd5464 on January 15, 2009 - 17:14

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

Submitted by matti on September 9, 2009 - 07:24

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.

Submitted by Brockjnr on October 14, 2009 - 12:14

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?

Submitted by Kevin on December 30, 2009 - 22:59

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.

Submitted by Anup Das Gupta on November 4, 2010 - 06:34

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.

You are here