前台的页面显示，关于左右框内容移动问题

如果所示，我想当我可选中左边的某一行，点击中间的移动，可以移动到右边去，当我点击右边的某一行可以移动到左边去，或者可以去除掉所有的，也可以添加所有的，如果能带查询的更好，谁有这方面的东西，教我一下，谢谢了。我后台用的JAVA。

这是我曾经用过的一个html，你新建一个html粘进去直接就可以看效果。

<title> </title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="../../css/index.css" rel="stylesheet" type="text/css" />
<link href="../../css/leftmenu.css" rel="stylesheet" type="text/css" />
<link href="../../css/css.css" rel="stylesheet" type="text/css" />
<link href="../../css/dzkutd.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
    function LTrim(str)
    {
        var whitespace = new String("　 \t\n\r");
        var s = new String(str);
        if (whitespace.indexOf(s.charAt(0)) != -1)
        {
            var j=0, i = s.length;
            while (j < i && whitespace.indexOf(s.charAt(j)) != -1)
            {
                j++;
            }
            s = s.substring(j, i);
        }
        return s;
    }

    function GetObjID(ObjName) {
        for ( var ObjID=0; ObjID < window.deptSelectForm.elements.length; ObjID++ )
            if (window.deptSelectForm.elements[ObjID].name == ObjName ) {
                return(ObjID);
                break;
            }
        return(-1);
    }

    function AppendItem(allMenu, menu, isAll) {
        for (j=0; j<document.getElementById(allMenu).length; j++){
            if (isAll == true || document.getElementById(allMenu).options[j].selected){
                //GET VALUE
                document.getElementById(allMenu).options[j].selected = false;
                //GET LENGTH
                DesLen = document.getElementById(menu).length;
                // NEW OPTION
                document.getElementById(menu).options[DesLen] = new Option(LTrim(document.getElementById(allMenu).options[j].text), document.getElementById(allMenu).options[j].value);
                document.getElementById(allMenu).remove(j);
                j--;
            }
        }
    }
    function turnUp() {
        for (j=0; j<document.getElementById("resultDept").length; j++){
            if (document.getElementById("resultDept").options[j].selected){
                if (j == 0) {
                    alert("请从第二个开始选择");
                    return;
                }
                //GET VALUE
                i = j - 1;
                var obj = document.getElementById("resultDept").options[j];
                var value = document.getElementById("resultDept").options[i].value;
                var text = document.getElementById("resultDept").options[i].text;
                document.getElementById("resultDept").options[i].value = obj.value;
                document.getElementById("resultDept").options[i].text = obj.text;
                document.getElementById("resultDept").options[i].selected = true;
                document.getElementById("resultDept").options[j].value = value;
                document.getElementById("resultDept").options[j].text = text;
                document.getElementById("resultDept").options[j].selected = false;
            }
        }
    }
    function turnDown() {
        for (j=document.getElementById("resultDept").length-1; j>-1; j--){
            if (document.getElementById("resultDept").options[j].selected){
                if(j==document.getElementById("resultDept").length - 1) {
                    alert("请从倒数第二个开始选择");
                    return;
                }
                //GET VALUE
                i = j + 1;
                var obj = document.getElementById("resultDept").options[j];
                var value = document.getElementById("resultDept").options[i].value;
                var text = document.getElementById("resultDept").options[i].text;
                document.getElementById("resultDept").options[i].value = obj.value;
                document.getElementById("resultDept").options[i].text = obj.text;
                document.getElementById("resultDept").options[i].selected = true;
                document.getElementById("resultDept").options[j].value = value;
                document.getElementById("resultDept").options[j].text = text;
                document.getElementById("resultDept").options[j].selected = false;
            }
        }
    }
    function ok()
    {

        window.close();
    }
</script>

项目查询条件
项目状态项目名称境内外所在大区所在国家建设地区代码行业代码重点行业业务种类五级分类

没做过
不过我有个思路
一个角色一个div对象，选中的时候，经div的信息用js缓存，确定移动的时候，被移动的框删除div，而曾家那边加一个就行，然后js的缓存指空
复杂点的就是捕捉shift键和cltr键的批量操作

用Jquery，有插件实现这种效果的。
不妨看看[url]http://wen2r.iteye.com/blog/497513[/url]和[url]http://phf123456-yeah-net.iteye.com/blog/711708[/url]

介绍个好插件：jqmultiselects

挺不错的小插件，能满足一般需求
1、使用非常简单
2、支持Ctrl、Shift连续与不连续选择

3、项目地址、示例及说明：http://pure-essence.net/stuff/webTips/dodosPicklist/index.html

个人觉得没有必要写那么长的代码，即冗长，又难读难维护

用jqmultiselects，使用很简单：
例子1：
[code="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

New Document

 $(function(){ // selected：左边下拉框的name // available：右边下拉框的name // (OPTIONAL) adjust the width of the select box to the bigger of the two // 用两个下拉框中的最大宽度来调整下拉框，写法不分左右 $("select[name='selected']").selectAdjustWidth("select[name='available']"); <pre><code>// 未分配下拉框(左边)事件 $("select[name='selected']").multiSelect("select[name='available']"); // 已分配下拉框(右边)事件 $("select[name='available']").multiSelect("select[name='selected']"); </code></pre> });

1终端厂商1
2政企客户2
3客户经理3
4运营商4

[/code]

例子2：
[code="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

New Document

 $(function(){ // selected：左边下拉框的name // available：右边下拉框的name <pre><code>// (OPTIONAL) adjust the width of the select box to the bigger of the two // 用两个下拉框中的最大宽度来调整下拉框，写法不分左右 $("select[name='selected']").selectAdjustWidth("select[name='available']"); // 未分配下拉框(左边)事件 $("select[name='selected']").multiSelect("select[name='available']", { trigger: "input[name='add']", // >按钮 triggerAll: "input[name='addAll']" // >>按钮 }); // 已分配下拉框(右边)事件 $("select[name='available']").multiSelect("select[name='selected']", { trigger: "input[name='remove']", // <按钮 triggerAll: "input[name='removeAll']" // <<按钮 }); </code></pre> });

1终端厂商1
2政企客户2
3客户经理3
4运营商4

                <input name="removeAll" type="button" class="button addAllButton" value="&lt;&lt;" title="Add all"><br>
                <input name="addAll" type="button" class="button removeAllButton" value="&gt;&gt;" title="Remove all">
            </div>
        </td>
        <td>
            <div>
                <!-- 已分配下拉框 -->
                <select name="available" size="10" multiple="multiple">
                </select>
            </div>
        </td>
    </tr>
</table>

[/code]

这个没什么样式，那上边引入的一些css都没用上，你可以根据你的项目的风格把按钮和背景色该一下就可以了。而且你可能也看到了左右两个装载数据的都是select，当你数据多的时候它会自动有下拉条。