js里面<option>的上下移动选择

最近在弄js里面<option>的上下移动选择,参考了很多，把自己最终弄好的mark下来

<table align=center width="80%" border="0" cellpadding="2" cellspacing="0">

<tr>
<td class="td_middle" width="90%">
<select name="showItem" size="28" multiple id="showItem" style="width:100%;">
</select>

</td>
<td class="td_middle" align=center width="10%">
<p><button class="btn btn-sm btn-primary btn-outline" type="button" οnclick="movetop('showItem')"><i class="fa fa-level-up"></i>移至顶部</button></p>
<p><button class="btn btn-sm btn-primary btn-outline" type="button" οnclick="moveUP()"><i class="fa fa-arrow-up"></i>上移</button></p>
<p><button class="btn btn-sm btn-primary btn-outline" type="button" οnclick="moveDown()"><i class="fa fa-arrow-down"></i>下移</button></p>
<p><button class="btn btn-sm btn-primary btn-outline" type="button" οnclick="movebottom('showItem')"><i class="fa fa-level-down"></i>移至底部</button></p>
<p><button class="btn btn-sm btn-primary btn-outline" type="button" οnclick="forSave()"><i class="fa fa-save"></i>保存</button></p>
</td>
</tr>

</table>

<script>

var tmpvalue="";//临时<option>的value
var tmptext="";//临时<option>的标记text
var tmp="";//临时<option>节点 
var rtmp="";//要替换的option

var lastValue=new Array();//排序后的值

function moveUP(){//上移
move(document.getElementById("showItem"),0);
}


function moveDown(){//下移 
move(document.getElementById("showItem"),1);
}

    //0-上移动 ; 1-往下移动;
    function move(obj, flag) {
        if (obj == null)
            return;
        if (flag == 0) {
            for (i = 0; i < obj.options.length; i++) {
                if (obj.options[i].selected) {
                    if (i == 0) return;
                    tmpvalue = obj.options[i].value;
                    tmptext = obj.options[i].text;
                    tmp = document.createElement("option");
                    tmp.value = tmpvalue;
                    tmp.text = tmptext;


                    rtmp=obj.options[i-1];//要替换的option
                    obj.options[i-1]=tmp;
                    obj.options[i]=rtmp;
                    tmp.selected = true;
                    document.getElementById("showItem").scrollTop = document.getElementById("showItem").scrollTop+5;
                }
            }
            if(document.body.scrollTop > 10){
                document.body.scrollTop += -10;
            }
        } else {
            for (i = obj.options.length - 1; i >= 0; i--) {
                if (obj.options[i].selected) {
                    if (i == (obj.length - 1)) return;
                    tmp = document.createElement("option");
                    tmp.value = obj.options[i].value;
                    tmp.text = obj.options[i].text;
               
                    rtmp=obj.options[i+1];//替换的option
                    obj.options[i+1]=tmp;
                    obj.options[i]=rtmp;
                    tmp.selected = true;
                }
            }
            document.body.scrollTop += 10;
        }
    }
    
    
    
    function movetop(objCtr) {//上移到顶部
    obj=document.getElementById(objCtr);
        var moveTop=new Array();//上移option
        topIndex=0;
        var moveDown=new Array();//下移option
        downIndex=0;
        for (i = 0; i < obj.options.length; i++) {
            if (obj.options[i].selected) {
                moveTop[topIndex]=obj.options[i];
                topIndex++;
            }else{
                moveDown[downIndex]=obj.options[i];
                downIndex++;
            }
        }


        obj.options.length=0;
        allIndex=0;
        for(i=0;i<moveTop.length;i++){
            obj.options[allIndex]=moveTop[i];
            allIndex++;
        }
        for(i=0;i<moveDown.length;i++){
            obj.options[allIndex]=moveDown[i];
            allIndex++;
        }
    }
    
    
    
    function movebottom(objCtr) {//下移到底部 
    obj=document.getElementById(objCtr);


        var moveTop=new Array();//上移option
        topIndex=0;
        var moveDown=new Array();//下移option
        downIndex=0;
        for (i = 0; i < obj.options.length; i++) {
            if (obj.options[i].selected) {
                moveDown[topIndex]=obj.options[i];
                topIndex++;
            }else{
                moveTop[downIndex]=obj.options[i];
                downIndex++;
            }
        }


        obj.options.length=0;


        allIndex=0;
        for(i=0;i<moveTop.length;i++){
            obj.options[allIndex]=moveTop[i];
            allIndex++;
        }
        for(i=0;i<moveDown.length;i++){
            obj.options[allIndex]=moveDown[i];
            allIndex++;
        }
    }

</script>