<script>
	function moveOption(e1, e2){
	 for(var i=0;i<e1.options.length;i++){
	  if(e1.options[i].selected){
		   var e = e1.options[i];
		   e2.options.add(new Option(e.text, e.value));
		   e1.remove(i);
		   i=i-1
	  }
	 }
		 document.getElementById('result').value=getvalue(document.getElementById('right'));
		 //alert( document.getElementById('result').value);
	}
function getvalue(geto){
 var resultArray = new Array();
 for(var i=0;i<geto.options.length;i++){
  resultArray.push(geto.options[i].value);
 }
 return resultArray.join();
}
</script>

<table>


 <tr>
	  <td width="30%" align="center">
	    <select name="left" id="left" style="height:200px;width=50px;" multiple="multiple">     
			<option value='1'>001</option>
			<option value='2'>002</option>
			<option value='3'>003</option>
			<option value='4'>004</option>	
		</select>
	  </td>
      <td width="20%" align="center">
		  <input type="button" value=" >>>> " id="turnRightBtn" onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
		   <br>
		   <br>
		   <input type="button" id="turnLeftBtn" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
      </td>
	  <td align="left">
	    <select name="right" id="right" style="height:200px;width=50px;" multiple="multiple"> 
		</select>
		<input type="hidden" name="result" id="result" value="" />
		</td>
	</tr>
</table>