Web双向选择器左右选择DEMO

wlhbye

浏览: 27055 次
性别:
来自: 北京

最近访客更多访客>>

IThanshui

bug_

hsz9747

vambadoz

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (11)

社区版块

存档分类

Web JavaScript XHTML CSS HTML

<!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>

分享到：