<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Web双向选择器</title>
<script type="text/javascript" language="javascript">
function moveItem(dest, source)
{
var dest = ( typeof dest == "string" ? document.getElementById(dest): dest );
var source = ( typeof source == "string" ? document.getElementById(source) : source );
if( source.tagName.toLowerCase() != "select" || dest.tagName.toLowerCase() != "select" )
return;
for ( index=source.length - 1; index >= 0; index-- ) {
if ( source[index].selected ) {
dest.length++;
dest[dest.length-1].id = source[index].id;
dest[dest.length-1].value = source[index].value;
dest[dest.length-1].text = source[index].text;
source[index] = null;
}
}
}
</script>
<style type="text/css">
select
{}{
margin:-2px;
}
</style>
</head>
<body>
<table width="20%" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="10%">
<select size="10" multiple="multiple" id="left" ondblclick="moveItem(right,this)" style="width:120px; ">
<option value="def7">ListItem1</option>
<option value="abcd6">ListItem2</option>
</select>
</td>
<td width="3%">
<input type="button" value=" >> " name="btnRight" onclick="moveItem(right,left)" />
<input type="button" value=" << " onclick="moveItem(left,right)" id="btn" name="btnLeft" />
</td>
<td width="10%">
<select size="10" multiple="multiple" id="right" ondblclick="moveItem(left,this)" style="width:120px; ">
<option value="abce">ListItemm3</option>
<option value="def1">ListItem4</option>
<option value="abcd2">ListItem5</option>
<option value="abc3">ListItem6</option>
<option value="def4">ListItem7</option>
<option value="abcd5">ListItem8</option>
</select>
</td>
</tr>
</table>
</body>
</html>
?