We will explore the multi select field , and see how this can be used in real life forms using MooTools.

Objective : Given a source multiple select box , whose value needs to be copied to another give multiple select box.

<!DOCTYPE html>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
					window.addEvent('domready', function(){
				padding: 5px;
				select {
		<form id="myForm6" method="get" name="myForm6">
			<span>Available Hobby</span><br/>
			<select  multiple id="source" size="4">
				<option value="Cricket">Playing Cricket</option>
				<option value="Music">Listening Music</option>
				<option value="Movies">Watching Movies</option>
				<option value="Guitar">Playing Guitar</option>
		<div style="width:40px;margin-top:19px">
			<input type="button" id="mvLeft" value="<<" />
			<input type="button" id="mvRight" value=">>" />
		<div >
		<span>Chosen Hobby</span><br/>
			<select   multiple id="target" size="4">


Explanation: We have a source and target multiple select option, the source has few options , which is selected , and when clicked on the >> arrow is moved to the target. The the reverse is also possible.  We attach the click event on both the buttons, and used the $('source').getSelected() and $('target').getSelected() method to fetch which options are selected , and then these values are adopted to the target and source selection box.


Available Hobby
Chosen Hobby