Cacher is the code snippet organizer for pro developers

<select id="from" style="float: left; width: 200px;" multiple>
	
	<option value="1">AA</option>
	<option value="2">BB</option>
	<option value="3">CC</option>
	<option value="4">DD</option>
	<option value="5">EE</option>

</select>

<button style="float: left; margin-left: 10px; margin-right: 10px;" id="a">&gt;</button>
<button style="float: left; margin-left: 10px; margin-right: 10px;" id="b">&lt;</button>
<select id="to" style="float: left;  width: 200px;" multiple></select>




<script>
	var $from = $("#from");
	var $to = $("#to");


	$("#a").click(function(){

		moveOptions($from, $to);
	});	

	$("#b").click(function(){

		moveOptions($to, $from);

	});


	function moveOptions(from, to)
	{
		$("option:selected", from).appendTo(to);
		var x = $("#from option").sort(function(a, b){

			a = a.value;
			b = b.value;

			return a-b;
		});	



		var y = $("#to option").sort(function(a, b){

			a = a.value;
			b = b.value;

			return a-b;
		});


		$("#from").html(x);
		$("#to").html(y);
	}

</script>