Please try this..
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnRight').click(function(e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
$('#btnLeft').click(function(e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox1').append($(selectedOpts).clone());
$(selectedOpts).remove();
e.preventDefault();
});
});
</script>
<table style='width: 370px;'>
<tr>
<td style='width: 160px;'>
<b>Group 1:</b><br />
<select multiple="multiple" id='lstBox1'>
<option value="ajax">Ajax</option>
<option value="jquery">jQuery</option>
<option value="javascript">JavaScript</option>
<option value="mootool">MooTools</option>
<option value="prototype">Prototype</option>
<option value="dojo">Dojo</option>
</select>
</td>
<td style='width: 50px; text-align: center; vertical-align: middle;'>
<input type='button' id='btnRight' value=' > ' />
<br />
<input type='button' id='btnLeft' value=' < ' />
</td>
<td style='width: 160px;'>
<b>Group 2: </b>
<br />
<select multiple="multiple" id='lstBox2'>
<option value="asp">ASP.NET</option>
<option value="c#">C#</option>
<option value="vb">VB.NET</option>
<option value="java">Java</option>
<option value="php">PHP</option>
<option value="python">Python</option>
</select>
</td>
</tr>
</table>
Hope it work well...
Thank you..