js左右下上移动

js左右上下移动


<form name="roleForm">
<table>
<tr>
                <td>
                    <select name="selLeft" size="25" multiple style="width:20em">
                            <option value="1">查看用户列表</option>
                            <option value="2">搜索用户</option>
                            <option value="3">查看用户提醒设置</option>
                            <option value="4">查看用户消息</option>
                            <option value="5">查看分类管理员</option>
                            <option value="6">查看兼职人员管理</option>
                            <option value="7">查看角色列表</option>
                            <option value="8">查看等级列表</option>
                            <option value="9">查看问题类别</option>
                            <option value="10">查看答案列表</option>
                            <option value="11">查看答案评论</option>
                            <option value="12">查看问题推荐列表</option>
                            <option value="13">查看专家推荐列表</option>
                            <option value="14">查看会员推荐列表</option>
                            <option value="15">查看首页问题库</option>
                            <option value="16">查看用户统计</option>
                            <option value="17">查看兼职数据统计</option>
                            <option value="18">查看时计查询</option>
                            <option value="19">查看日计查询</option>
                            <option value="20">查看月计走势图</option>
                    </select>
                </td>
                <td>
                <p>
                    <input type="button" name="add" value=" &gt;&gt;"
                           onclick="addSelect(document.roleForm.selLeft, document.roleForm.selRight)">
                </p>
                <p>
                    <input type="button" name="del" value="&lt;&lt; "
                           onclick="addSelect(document.roleForm.selRight,document.roleForm.selLeft)">
                </p>
     <p>
                    <input type="button" name="del" value="上 移"
                           onclick="moveUp(document.roleForm.selRight)">
                </p>
    <p>
                    <input type="button" name="del" value="下 移"
                           onclick="moveDown(document.roleForm.selRight)">
                </p>
                </td>
                <td>
                    <select name="selRight" size="25" multiple style="width:20em">
                    </select>
                </td>
            </tr>
</table>
</form>
<script>
function addSelect(selLeft,selRight){
  for(var i=0;i<selLeft.length;i++){
   var opt = selLeft.options[i];
   if(opt.selected){
    var found = false;
    for(var j=0; j<selRight.length;j++){
     opt1= selRight.options[j];
     if(opt.value == opt1.value){
      found = true;
     }
    }
    if(!found){
     selRight.options[selRight.options.length] = new Option(opt.text,opt.value,0,0);
    }
   
   selLeft.options[i] = null;
   -- i;
   }
  }
}

function moveUp(selRight){
  for(var i=0;i<selRight.length;i++){
   var opt = selRight.options[i];
   if(opt.selected){
    if(i == 0){
     alert("已经是第一个");
    }else{
     var nextText = selRight.options[i-1].text;
     var nextValue = selRight.options[i-1].value;
     selRight.options[i-1].text =  opt.text;
     selRight.options[i-1].value = opt.value;
     opt.text = nextText;
     opt.value = nextValue;
     selRight.options[i-1].selected=true;
     selRight.options[i].selected=false;
    }
   break;
   }
  }
}
function moveDown(selRight){
  for(var i=0;i<selRight.length;i++){
   var opt = selRight.options[i];
   if(opt.selected){
    if(i == selRight.length-1){
     alert("已经是最后一个");
    }else{
     var nextText = selRight.options[i+1].text;
     var nextValue = selRight.options[i+1].value;
     selRight.options[i+1].text =  opt.text;
     selRight.options[i+1].value = opt.value;
     opt.text = nextText;
     opt.value = nextValue;
     selRight.options[i+1].selected=true;
     selRight.options[i].selected=false;
    }
   break;
   }
  }
}
</script>