Multi select option move to another multiselect

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>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
					$('mvRight').addEvent('click',function(){
						$('target').adopt($('source').getSelected());
						
					});
					$('mvLeft').addEvent('click',function(){
						$('source').adopt($('target').getSelected());
						
					});
					
					
				});
			</script>
			<style>
				div{
				float:left;
				padding: 5px;
				}
				select {
					width:120px;
					}
			</style>
	</head>
	<body>
  
		<form id="myForm6" method="get" name="myForm6">
		<p>
		<div>
			<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>
			</select>
		</div>
		<div style="width:40px;margin-top:19px">
			<input type="button" id="mvLeft" value="<<" />
			<input type="button" id="mvRight" value=">>" />
		</div>
		<div >
		<span>Chosen Hobby</span><br/>
			
			<select   multiple id="target" size="4">
			</select>
		</div>		
			</p>
			
	</form>
	</body>
</html>

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.

Demo: