笑看风云

一切从头开始
posts - 28, comments - 1, trackbacks - 0, articles - 2

列表框的左右上下移动

Posted on 2009-01-09 16:41 笑看风云 阅读(318) 评论(0)  编辑  收藏 所属分类: javascript
效果图如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>列表框上下左右操作</title>
    </head>
    <script language="javascript">  
    <!--   
    var ListUtil = new Object();   
    //全部移动   
    ListUtil.moveAll = function moveAll(oListboxFrom,oListboxTo){   
        var options = oListboxFrom.options;   
        for(var i = 0; i < options.length; i++){   
            oListboxTo.appendChild(options[i]); //???   
            i -= 1;  //???每删除一个选项后，每个选项的index会被重置   
        }   
    }   
    //单个或多个移动   
    ListUtil.moveMuti = function moveMuti(oListboxFrom,oListboxTo){   
        var options = oListboxFrom.options;   
        for(var i = 0; i < options.length; i++){   
            if(options[i].selected){   
                oListboxTo.appendChild(options[i]);   
                i -= 1;   
            }   
        }   
    }   
    //上移   
    ListUtil.shiftUp = function(oListbox) {   
        if(oListbox.selectedIndex > 0){   
            var oOption = oListbox.options[oListbox.selectedIndex];   
            var oPrevOption = oListbox.options[oListbox.selectedIndex-1];   
            oListbox.insertBefore(oOption,oPrevOption);   
        }   
    }   
    //下移   
    ListUtil.shiftDown = function(oListbox){   
        if(oListbox.selectedIndex < oListbox.options.length-1){   
            var oOption = oListbox.options[oListbox.selectedIndex];   
            var oNextOption = oListbox.options[oListbox.selectedIndex+1];   
            oListbox.insertBefore(oNextOption,oOption);   
        }   
    }   
    //-->  
    </script>
    <body text="#000000" bgcolor="#ffffff" link="#0033cc">
        <form method=post action="#">
            <table>
                <tr><td>
                        未选员工
                        <select name="oListboxFrom" id="oListboxFrom" size="10"
                            multiple="true"
                            style="width: 100px; height: 250px; margin-left: 20px; float: left">
                            <option value="1" selected>员工1</option>
                            <option value="2">员工2</option>
                            <option value="3">员工3</option>
                            <option value="4">员工4</option>
                            <option value="5">员工5</option>
                        </select>
                    </td>
                    <td align="center">
                        <input type="button" value=" >>> "
                            onclick="ListUtil.moveAll(oListboxFrom, oListboxTo);" />
                        <br />
                        <input type="button" value=" >> "
                            onclick="ListUtil.moveMuti(oListboxFrom, oListboxTo);" />
                        <br />
                        <input type="button" value=" << "
                            onclick="ListUtil.moveMuti(oListboxTo, oListboxFrom);" />
                        <br />
                        <input type="button" value=" <<< "
                            onclick="ListUtil.moveAll(oListboxTo, oListboxFrom);" />
                        <br />
                        <input type="button" value=" ↑ "
                            onclick="ListUtil.shiftUp(oListboxFrom);" />
                        <br />
                        <input type="button" value=" ↓ "
                            onclick="ListUtil.shiftDown(oListboxFrom);" />
                    </td>
                    <td>
                        已选员工
                        <select name="oListboxTo" id="oListboxTo" multiple="true"
                            size="10"
                            style="width: 100px; height: 250px; margin-left: 20px; float: left">
                            <option value="319094784">员工6</option>
                            <option value="320274432">员工8</option>
                            <option value="322109440">员工7</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


只有注册用户登录后才能发表评论。
网站导航: