写的一个双向选择器(JS)

写的一个双向选择器(JS)

<!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>
相关阅读:
css3:让IE兼容background-size的方法
 判断浏览器版本是否是ie9以下浏览器，提示升级
 正则表达式
 H5页面内容较少时如何让页面全屏在手机显示呢
 页面滚动指定高度时添加样式或动画
 使用js实现导航切换效果变化（收集案例）
单行文字定时滚动（收集案例）
使用zepto.js完成的手机相册
 Repaint 、Reflow 的基本认识和优化
 Web-[强网杯 2019]随便注
原文地址：https://www.cnblogs.com/CSharp/p/416991.html