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
Very nice! I have been
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.
Like this as it works,
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?
Love the idea. Don't push a
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.
ummm it doesn't work... just
ummm it doesn't work... just acts like two normal checklists
Here is my
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. ;)
There is a problem in IE7
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
How to determine the multiple
How to determine the multiple select maximum count?
I like the idea, but it does
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.
awful. so buggy
awful. so buggy
Doesn't work on Chrome
Doesn't work on Chrome
Just one word is 'WOW'.Unique
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.
I've got something cooking
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
The following pretty solution
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 ...
You must move the cursor OFF
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.
It's is still evil.
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.
your work is good , but
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
Hi there, it's not working
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) {}
Sorry for the trouble. I
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.........
This code works fine for me.
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.
Toggling has a bug in FF
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.
Nice, but don't really work
Nice, but don't really work on Safari 2 :(
doesn't work in IE7 on
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.
It's ok, except for the
It's ok, except for the 'blinking' as you make selections. That's kind of annoying.
Nice idea, but why not use
Nice idea, but why not use checkboxes? It does the same thing and won't be unpredictable behavior to a user.
Guess what: works fine on
Guess what: works fine on Camino, but not on Safari 3... Let's hope Apple fixes this in their final release of Safari.
We need a library so
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.
Post new comment