js选择左移 右移 上移 下移

实现类似上面的js选择代码：

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/jstl.jsp" %>
<div class="pageHeader">
  <form onsubmit="return navTabSearch(this);" action="203913.tran" method="post" id="form1">
  <div class="searchBar">
      <table class="searchContent">
      <tr>
        <td>任务类型：</td>
        <td>
            <select class="combox" name="TASKTYPE" id="TASKTYPE" style="width:200px;">
                <option value="WF001" <c:if test="${ETF.TASKTYPE=='WF001'}">selected="true"</c:if>>办事处申请</option>
                <option value="WF002" <c:if test="${ETF.TASKTYPE=='WF002'}">selected="true"</c:if>>直营特约商户申请</option>
                <option value="WF003" <c:if test="${ETF.TASKTYPE=='WF003'}">selected="true"</c:if>>办事处终止申请</option>
                <option value="WF004" <c:if test="${ETF.TASKTYPE=='WF004'}">selected="true"</c:if>>直营特约商户终止申请</option>
                <option value="WF005" <c:if test="${ETF.TASKTYPE=='WF005'}">selected="true"</c:if>>增机申请</option>
                <option value="WF006" <c:if test="${ETF.TASKTYPE=='WF006'}">selected="true"</c:if>>退机申请</option>
                <option value="WF007" <c:if test="${ETF.TASKTYPE=='WF007'}">selected="true"</c:if>>故障机处理申请</option>
                <option value="WF013" <c:if test="${ETF.TASKTYPE=='WF013'}">selected="true"</c:if>>直营商户信息变更申请</option>
                <option value="WF008" <c:if test="${ETF.TASKTYPE=='WF008'}">selected="true"</c:if>>下属特约商户申请</option>
                <option value="WF009" <c:if test="${ETF.TASKTYPE=='WF009'}">selected="true"</c:if>>下属特约商户增机申请</option>
                <option value="WF010" <c:if test="${ETF.TASKTYPE=='WF010'}">selected="true"</c:if>>下属特约商户撤机申请</option>
                <option value="WF011" <c:if test="${ETF.TASKTYPE=='WF011'}">selected="true"</c:if>>下属特约商户故障机处理申请</option>
                <option value="WF012" <c:if test="${ETF.TASKTYPE=='WF012'}">selected="true"</c:if>>下属特约商户终止处理申请</option>
                <option value="WF014" <c:if test="${ETF.TASKTYPE=='WF014'}">selected="true"</c:if>>下属商户信息变更申请</option>
            </select>
        </td>
       </tr>
      </table>
    
    <div class="subBar">
      <ul>
        <li><div class="buttonActive"><div class="buttonContent"><button type="submit">&nbsp;&nbsp;查 &nbsp;&nbsp; 询 &nbsp;&nbsp;</button></div></div></li>&nbsp;&nbsp;
      </ul>
    </div>
  </div>
  </form>
</div>
<div class="pageContent">
    <br>
    <br>
    <br>
    <br>
    <form onsubmit="return navTabSearch(this);" action="203914.tran" method="post">
  <table  width="800" align="center" layoutH="167">
            <tr>
                <td width="10%"></td>
                <td width="30%">可选择流程<br></td>
                <td width="5%"></td>
                <td width="15%"></td>
                <td width="30%">已选择流程<br></td>
              <td width="10%"></td>
            </tr>
            <tr>
                  <td width="10%"></td>
                    <td width="30%">
                        <select style="width:100%;" multiple name="left" size="8"  id="left">
                            <c:forEach items="${ETF.STEPSE_LST}" var="STEPSE">
                                    <option value="${STEPSE.STEPTYPE}">${STEPSE.STEPNAME}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td width="5"></td>
                    <td clospan="2" width="15%" align="center">
                            <input type="button" value="右移" onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
                            <br>
                            <br>
                            <input type="button" value="左移" onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
                            <br>
                            <br>
                            <INPUT TYPE="button" value="上移" onClick="moveUp(document.getElementById('right'))">
                            <br>
                            <br>
                            <INPUT TYPE="button" value="下移" onClick="moveDown(document.getElementById('right'))">
                    </td>
                    <td width="30%">
                        <select style="width:100%;" multiple name="right" size="8"  id="right">
                            <c:forEach items="${ETF.STEPEX_LST}" var="STEPEX">
                                    <option value="${STEPEX.STEPTYPE}">${STEPEX.STEPNAME}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td width="10%"></td>
            </tr>
    </table>
    <!--值：-->
    <input type="hidden" name="RESULT" id="RESULT" size="40" value="" />
    <input type="hidden" name="TASKTYPE" id="TASKTYPE" value="${ETF.TASKTYPE}" />
    <input type="hidden" name="MODTYPE" id="MODTYPE" value="0" />
    <div class="formBar">
      <ul>
         <li><div class="buttonActive"><div class="buttonContent"><button type="submit" target="navTab">确认修改</button></div></div></li>
      </ul>
    </div>    
    </form>
</div>
<script language="JavaScript">

function moveOption(e1, e2){
        for(var i=0;i<e1.options.length;i++){
                if(e1.options[i].selected){
                    var e = e1.options[i];
                    e2.options.add(new Option(e.text, e.value));
                    e1.remove(i);
                    i=i-1
                }
        }
        document.getElementById('RESULT').value=getvalue(document.getElementById('right'));
        document.getElementById('MODTYPE').value = "1";
}

function getvalue(geto){
        var resultArray = new Array();
        for(var i=0;i<geto.options.length;i++){
            resultArray.push(geto.options[i].value);
        }
        return resultArray.join();
}

//上移
function moveUp(obj)
{　
　　for(var i=1; i < obj.length; i++)
　　{//最上面的一个不需要移动，所以直接从i=1开始
　　　　if(obj.options[i].selected)
　　　　{
　　　　　　if(!obj.options.item(i-1).selected)
　　　　　　{
　　　　　　　var selText = obj.options[i].text;
　　　　　　　var selValue = obj.options[i].value;
                            obj.options[i].text = obj.options[i-1].text;
                            obj.options[i].value = obj.options[i-1].value;
                            obj.options[i].selected = false;
                            obj.options[i-1].text = selText;
                            obj.options[i-1].value = selValue;
                            obj.options[i-1].selected=true;
　　　　　　}
　　　　}
　　　}
            document.getElementById('RESULT').value=getvalue(document.getElementById('right'));
            document.getElementById('MODTYPE').value = "1";
}
//下移
function moveDown(obj)
{
　for(var i = obj.length -2 ; i >= 0; i--)
　{//向下移动，最后一个不需要处理，所以直接从倒数第二个开始
　　　if(obj.options[i].selected)
　　　{
　　　　 if(!obj.options[i+1].selected)
　　　　 {
　　　　　　var selText = obj.options[i].text;
　　　　　　var selValue = obj.options[i].value;
                        obj.options[i].text = obj.options[i+1].text;
                        obj.options[i].value = obj.options[i+1].value;
                        obj.options[i].selected = false;
                        obj.options[i+1].text = selText;
                        obj.options[i+1].value = selValue;
                        obj.options[i+1].selected=true;
　　　　　}
　　　　}
　}
  document.getElementById('RESULT').value=getvalue(document.getElementById('right'));
  document.getElementById('MODTYPE').value = "1";
}

</script>