写的一个双向选择器(JS)
2006-06-04 14:01 sun@live 阅读(666) 评论(0) 编辑 收藏 举报
<!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="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <select size="6" multiple="multiple" id="left" ondblclick="moveItem(right,this)"> <option value="def">ListItem1</option> <option value="abcd">ListItem2</option> </select> </td> <td> <input type="button" value=" > " name="btnRight" onclick="moveItem(right,left)" /> <input type="button" value=" < " onclick="moveItem(left,right)" id="btn" name="btnLeft" /> </td> <td> <select size="6" multiple="multiple" id="right" ondblclick="moveItem(left,this)"> <option value="abc">ListItemm3</option> <option value="def">ListItem4</option> <option value="abcd">ListItem5</option> <option value="abc">ListItem6</option> <option value="def">ListItem7</option> <option value="abcd">ListItem8</option> </select> </td> </tr> </table></body></html>