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

Question

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

Answer 1

这是我曾经用过的一个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>

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