有关select左右移动、上下移动、双击移动效果代码

来源：互联网发布：java future 方法编辑：程序博客网时间：2024/05/21 17:11

通过select实现了内容互相移动的效果。如图所示效果。

有关代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">

    function addItem(objFrom,objTo){
        // objFrom 总的下拉框的所有的对象；
    var flag = false;
    var leng = objFrom.options.length;
      var ar=new Array();
        for(var i = 0; i < objFrom.options.length;i++){
            if(objFrom.options[i].selected == true){
                 //alert(i);
                 //alert(objFrom.selectedIndex);
                 //选择的项的索引值放到Array()数组中
                 ar[i]= i;
                 //flag = true;
                // 一个新的new Option(text,value);
                var selectItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
                objTo.options.add(selectItem);
              //objFrom.options.remove(objFrom.selectedIndex);
              //objFrom.options[i]=null;
              //objFrom.options.remove(i);
            }
        }
     // document.write(ar + "<br />");
      // document.write(ar + "");
    //alert(ar);
    if (ar.length==0) {
       alert("please select a Item");
       return;
       } else {
          var i=0;
          for (var j=0; j<ar.length; j++){
         // alert(ar[j]);
           if (ar[j]==undefined) {
                continue;
           } else {
          // 删除选中的项每删一个索引值要变的向上逐渐减一
              objFrom.options.remove(ar[j]-i);
             i++;
           }
          }
       }
/**

*/

   // if(!flag){
   // alert("please select a Item");
    //}
   sortItem(objTo);
    }
    function allAddItem(objFrom,objTo){
        for(var i = objFrom.options.length - 1;i>=0;i--){
            var objItem = new Option(objFrom.options[i].text,objFrom.options[i].value);
            objTo.options.add(objItem);
            objFrom.options.remove(i);
        }
        sortItem(objTo);
    }

    function sortItem(objTo){
        var ln = objTo.options.length;
        var arrText = new Array();
        var arrValue = new Array();
        for(var i=0;i<ln;i++){
            arrText[i] = objTo.options[i].text;
            //alert(arrText[i]);
        }
        arrText.sort();
        //alert(arrText);
        for(var i=0;i<ln;i++){
            for(var j = 0;j<objTo.options.length;j++){
                if(arrText[i] == objTo.options[j].text){
                   arrValue[i] = objTo.options[j].value;
                   break;
                }
           }
        }
        while(ln--){
            objTo.options[ln] = null;
        }
        for(i = 0;i<arrText.length;i++){
            objTo.add(new Option(arrText[i],arrValue[i]));
        }
    }
    function swapItem(option1,option2){
        var tempStr = option1.value;
        //alert(tempStr);
        //alert(option2.value);
        option1.value = option2.value;
        option2.value = tempStr;
        tempStr = option1.text;
        option1.text = option2.text;
        option2.text = tempStr;
        tempStr = option1.selected;
        option1.selected = option2.selected;
        option2.selected = tempStr;
    }
    function moveUp(selectObj){
        var obj = selectObj.options;
        for(var i = 1;i<obj.length;i++){
            if(obj[i].selected && !obj[i-1].selected){
                alert(obj[i].text);
                alert(obj[i-1].text);
                swapItem(obj[i],obj[i-1]);
            }
        }
    }
    function moveDown(selectObj){
        var obj = selectObj.options;
        for(var i = obj.length -2;i>-1;i--){
            if(obj[i].selected && !obj[i+1].selected){
                swapItem(obj[i],obj[i+1]);
            }
        }
    }
    function moveToTop(selectObj){
        var obj = selectObj.options;
        var oOption = null;
        for(var i = 0;i<obj.length;i++){
            if(obj[i].selected && oOption){
            alert(oOption.value);
                selectObj.insertBefore(obj[i],oOption);
            }else if(!oOption && !obj[i].selected){
                oOption = obj[i];
            }
        }
    }
    function moveToBottom(selectObj){
        var obj = selectObj.options;
        alert(obj.length);
        var oOption = null;
        for(var i = obj.length-1;i> -1;i--){
            if(obj[i].selected){
                if(oOption){
                    oOption = selectObj.insertBefore(obj[i],oOption);
                }else{
                    oOption = selectObj.appendChild(obj[i]);
                }
            }
        }
    }
    /*********************************************************
*初期画面項目を設定する。onload="checkFlag()"
*********************************************************/
   function checkFlag(){
   var flag = false;
       var btn1=document.getElementById("btn1");
       btn1.disabled=flag;
       var btn2=document.getElementById("btn2");
       btn2.disabled=flag;
   var btn3=document.getElementById("btn3");
       btn3.disabled=true;
   var btn4=document.getElementById("btn4");
       btn4.disabled=true;
   }

</script>
</head>
<body>
<table>
    <tr>
        <td>Color Code </td>
        <td></td>
        <td>Sample Order </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <select id="selectColor" multiple="multiple" style="width:200px;height:200px;">
                <option value="WBlack0">Black0</option>
                <option value="Blue1">Blue1</option>
                <option value="DK-RS2">DARK RINSE2</option>
                <option value="AK-SW3">AARK STONEWASH3</option>
                <option value="Green4">Green4</option>
                <option value="MD-SL5">MED SANDBLAST5</option>
                <option value="CD-SW6">CED STONEWASH6</option>
                <option value="NA7">Not applicable7</option>
                <option value="Yellow8">Yellow8</option>
                <option value="Red9">Red9</option>
            </select>

        </td>
        <td>
            <table>
                <tr>
                    <td><input type="button" id="btn1" value="-> " onclick="addItem(selectColor,selectSo)"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="btn2" value="->>" onclick="allAddItem(selectColor,selectSo)"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="btn3" value="<<-" onclick="allAddItem(selectSo,selectColor)"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="btn4" value="<- " onclick="addItem(selectSo,selectColor)"/></td>
                </tr>
            </table>
        </td>
        <td>
            <select id="selectSo" multiple="multiple" style="width:200px;height:200px;">
            </select>
        </td>
        <td>
            <table>
                <tr>
                    <td><input type="button" id="btn5" value="AA" onclick="moveToTop(selectSo)"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="btn6" value="A" onclick="moveUp(selectSo)"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="btn7" value="V" onclick="moveDown(selectSo)"/></td>
                </tr>
                <tr>
                    <td><input type="button" id="btn8" value="VV" onclick="moveToBottom(selectSo)"/></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript">
    document.getElementById("selectColor").ondblclick = function(){
        addItem(selectColor,selectSo);
    };
    document.getElementById("selectSo").ondblclick = function(){
        addItem(selectSo,selectColor);
    };
</script>
</body>
</html>