<html>
<head>
<script language="JavaScript">
<!--
function move(src1,src2){
var index=src1.selectedIndex;
if(index==-1) return;
var opts=src1.options;
var optobj=document.createElement("OPTION");
src2.options.add(optobj);
optobj.value=opts[index].value;
optobj.text=opts[index].text;}
//-->
</script>
</head>
<body>
<select id="sel1" name="sel1" style="width:100">
<option value="1" groupflag="1">1</option>
<option value="2" groupflag="1">2</option>
<option value="3" groupflag="1">3</option>
<option value="4" groupflag="2">4</option>
<option value="5" groupflag="2">5</option>
<option value="6" groupflag="2">6</option>
<option value="7" groupflag="3">7</option>
<option value="8" groupflag="3">8</option>
</select>
<input type="button" value="&gt;&gt;" onclick="move(sel1,sel2)">
<select id="sel2" name="sel2" style="width:100"></select>
</body>
</html>