Multi-Select Transfers Using MooTools 1.2

Ha looks good… and only 4 lines longer! :p No but seriously, I think it’s time for a new library… how about MooQuery?

Sorry, but I had to do this!!! :)

window.addEvent(‘domready’, function(){
$(‘add’).addEvent(‘click’, function(){
$(‘select1′).getSelected().inject($(‘select2′));
});
$(‘remove’).addEvent(‘click’, function(){
$(‘select2′).getSelected().inject($(‘select1′));
});
});
8 Lines

or even shorter

window.addEvent(‘domready’, function(){
var move = function(from, to){$(from).getSelected().inject($(to));}
$(‘add’).addEvent(‘click’, move.pass(['select1', 'select2']));
$(‘remove’).addEvent(‘click’, move.pass(['select2', 'select1']));
});
5 Lines

JS-Frameworks rock!!!

Ok, I’ll admit the ternary usage is a little ridiculous here, but here’s 5 lines in jQuery:

$().ready(function() {
  $(‘#add, #remove’).click(function() {
    $(‘option:selected’, $(this).is(‘#add’) ? $(‘#select1′) : $(‘#select2′)).remove().appendTo($(this).is(‘#add’) ? $(‘#select2′) : $(‘#select1′));
  });
});

This is what Jeremy’s very nice solution looks like in Mootools 1.2 (of course without the underscores :) ):

window.addEvent(‘domready’, function(){
__$$(‘#add, #remove’).addEvent(‘click’, function(){
____$(this.match(‘#add’)?’select1′:’select2′).getSelected().inject($(this.match(‘#remove’)?’select1′:’select2′));
__});
});

Though I would prefer the other 5 lines solution, as in my opion it is much clearer and ‘move’ can be used for every pair of selects.

@david:
thank you very much for this blog, as it is a daily pleasure for me.
I already use your Generic-Class, and some other ideas posted here.
Greets from Austria

I have been working on the same kind of widget for the past week, using jquery. I had seen the one from Jeremy when it first came out, but it doesn’t do nearly enough for my purposes. Mine does the same basic things as yours, only it works on reset, keeps items sorted when adding and removing, handles preselected items, and only requires a user to create one select box with the class multiple, then the code creates the second box and all the buttons.

I’d post the code, but it is a little over 100 lines, so it’s not exactly an easily readable snippet. If you are interested let me know and I’ll try to find a way to post it.

I’ll try to set something up when I get home.

I finally got around to posting it:

http://www.suptin.com/selector.html

If you view the source of the js file it will be a huge mess of stuff, and most of it is unrelated to the select transfer thing. Lines 4470 to 4552 contain the majority of the code related to the selector. The lines 4651 to 4654 are in an ready block that initializes the selectors.

Everything is much more organized, when I’m working on it, but I grabbed the build rather than the src. Also the code for the selector would be quite a bit cleaner if I didn’t have to worry about IE 6/7.

Hi David,

I like this script. I’ll try and integrate it in a little project of mine.

Otherwise, how does the code hightlighting on this blog work? I’ve been looking for a while and I think ones is pretty neat.
Mind sharing a little info on it?

Cheers,
Peter

Me again…

Answered my own question: you use wmd-editor.com

Now I’ve got to figure how to input code

anyone know of a drag and drop version of this?

Cheers.

Exellent David!! thnks a lot.

I need the same tutorial with mootools 1.11
please help

Where should I look if I wanted a 3 box multi select? Basically The first box contains top level categories, then when you select one of those categories, the second box loads up (via ajax) all the sub categories, and then the user can choose to transfer one of the sub categories across to the third and empty box.

Any ideas?

Wow … great !

But … an other chalange now ?

There is a great plugin for jQuery not yet for mootools : http://code.google.com/p/jquery-asmselect/

Is it possible to limit the amount you can transfer into the second select.

Thanks you too much, wonderful !

Thank you David for this.

I’ve added a dblclick on the option if someone wants it:

window.addEvent(‘domready’, function() {
$(‘element_add’).addEvent(‘click’, function(){
$(‘element1′).getSelected().inject($(‘element2′));
});
$(‘element_rem’).addEvent(‘click’, function(){
$(‘element2′).getSelected().inject($(‘element1′));
});
$$([$('element1'), $('element2')]).each(function(ex){
ex.getChildren().each(function(el){
el.addEvent(‘dblclick’,function(){
this.inject((this.getParent().get(‘id’)==’element1′ ? $(‘element2′) : $(‘element1′)));
});
});
});
});

Well i played with inject and swapping options between selectboxes way back in my online config editor.

What i came up with is putting it into a Hash (for global closed namespace – no other reason) where i store some helper functions and simply dynamicly call it

var APF = new Hash({
swapSB: function(s,t){ $(s).getSelected().inject($(t)); }
// alot more functions here …
});

and then call APF.swapSB(‘source’,'target’) onClick. This way you do not have to bind alot of events on domready but can use this where and when it’s needed. Basicly the way thomasd went using his move function on domready.

Hi

Is it possible on form submit that you can select all options in the second list.

Hi, David.

Nice script.

But how about the drag and drop version?

Thanks..