Multi-Select Transfers Using MooTools 1.2

By  on  

While I was a Zone Leader for DZone's AJAX, CSS, and PHP Zones, DZone's Rick Ross asked me to contact Jeremy Martin with regard to a hot blog post he created: Easy Multi Select Transfer with jQuery. Both Rick and I were impressed with Jeremy's script and asked him to repost on DZone.

Fast forward five months later, I decided that I simply had to create a MooTools script that would accomplish the same goal. I mean, if Jeremy's going to port the Kwicks effect to jQuery, why can't I take one back for the Moo team? In the end, the MooTools code looks very much like jQuery's code.

The HTML

<div class="holder">
	<select multiple="multiple" id="select1" name="select1[]">
		<option value="1">Option 1</option>
		<option value="2">Option 2</option>
		<option value="3">Option 3</option>
		<option value="4">Option 4</option>
	</select>
	<a href="javascript:;" id="add">add >></a>
</div>
<div class="holder">
	<select multiple="multiple" id="select2" name="select2[]">
		<option value="5">Option 5</option>
		<option value="6">Option 6</option>
	</select>
	<a href="javascript:;" id="remove"><< remove</a>
</div>

The MooTools JavaScript

window.addEvent('domready', function() {
	$('add').addEvent('click', function() {
		$('select1').getSelected().each(function(el) {
			el.inject($('select2'));
		});
	});
	$('remove').addEvent('click', function() {
		$('select2').getSelected().each(function(el) {
			el.inject($('select1'));
		});
	});
});

All we need to do is move the selected <option> elements to the other select list.

Note that the PHP $_POST variable receives the values correctly. Very practical and functional!

Recent Features

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

  • By
    Create a Trailing Mouse Cursor Effect Using MooTools

    Remember the old days of DHTML and effects that were an achievement to create but had absolutely no value? Well, a trailing mouse cursor script is sorta like that. And I'm sorta the type of guy that creates effects just because I can.

Discussion

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

  2. @Jeremy: Don’t tempt me to try to make it shorter!

  3. thomasd

    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'));
         });
    });
    

    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']));
    });
    

    JS-Frameworks rock!!!

  4. thomasd 1, David 0. Awesome work!

  5. 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'));
      });
    });
    
  6. thomasd

    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

  7. Nate

    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.

  8. @Nate: Feel free to post a link to an example.

  9. Nate

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

  10. Nate

    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.

  11. @Nate: Great work. Thank you for posting it.

  12. Peter

    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

  13. Peter

    Me again…

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

    Now I’ve got to figure how to input code

  14. James

    anyone know of a drag and drop version of this?

    Cheers.

  15. Ch@Sky

    Exellent David!! thnks a lot.

  16. sophy

    I need the same tutorial with mootools 1.11
    please help

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

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

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

  20. Thanks you too much, wonderful !

  21. Levis

    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')));
       });
      });
     });
    });
    
  22. 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 a lot of events on domready but can use this where and when it’s needed. Basically the way thomasd went using his move function on domready.

  23. Hi

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

  24. Avinash

    Hi, David.

    Nice script.

    But how about the drag and drop version?

    Thanks..

  25. Tarek

    Is it doable to implement the “order” on the second list ?

  26. Tarek

    btw it will cause a problem on IE8+ using :

    version:”1.2.1″,build:”0d4845aab3d9a4fdee2f0d4a6dd59210e4b697cf”

    the error :
    Message: JScript object expected
    Line: 1
    Char: 91770
    Code: 0

  27. ginger

    Hi,

    Can I use the mootools code for this multi select transfer module for free?

    Thanks!

  28. pwell

    I use this:

    $('to').adopt($('from').getSelected());
    
  29. pwell

    I use this:

    $('to').adopt($('from').getSelected());
    
  30. nemoglobine

    Hy David, thx for your great experience

    When i send the form, only highlighted options are sent

    I tried this stuff on submit event but it seem to be done after the form submit … any ideas ???

    $('select2').getParent('form').addEvent('submit', function () {
      $('select2').getElements('option').each(function (el) {
        el.set('selected', 'selected');
      });
    });
    
    • nemoglobine

      It’s works …

      The problem was that i declared many submit events and the first one send the form by ajax before selecting all options. So i placed this code before the form submit and it works …

      I hope this will help someone (maybe Scott Boyde !)

  31. Great simple solution – especially with the double click option! Thanks for sharing this!
    Hoping it warms up for a nice Wisconsin Labor Day!

  32. pSoupre

    for those looking to add the element “pre-selected” then add this line …

    el.setProperty('selected', 'selected');
    

    like this…

    $('add').addEvent('click', function() {
    $('select1').getSelected().each(function(el) {
      el.inject($('select2'));
      el.setProperty('selected', 'selected');
    });
    });
    
    $('remove').addEvent('click', function() {
    $('select2').getSelected().each(function(el) {
      el.inject($('select1'));
    });
    });
    
  33. pSouper

    For those looking to add the element “pre-selected” then add this line …

    el.setProperty('selected', 'selected');
    

    like this…

    $('add').addEvent('click', function() {
    $('select1').getSelected().each(function(el) {
    el.inject($('select2')); el.setProperty('selected', 'selected');
    });
    });
    $('remove').addEvent('click', function() { $('select2').getSelected().each(function(el) { el.inject($('select1'));
    });
    });
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!