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!

Cloudinary

Recent Features

Incredible Demos

  • By
    Create Twitter-Style Dropdowns Using MooTools

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

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!