【JavaScript】列表元素上下左右移动：Select和Option的应用

Posted on 2009-01-04 11:18 qiqi 阅读(816) 评论(1) 编辑收藏举报

功能如下：

支持一次选中多项在左右列表中来回移动

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Author" CONTENT="majianan">
  <script language="javascript" >
      var currentSel = null;
      function move(){
          if(arguments.length==1){
              moveUp(arguments[0]);
          }else if(arguments.length==2){
              moveRight(arguments[0],arguments[1]);
          }
      }
      function moveUp(direction){
          if(currentSel == null) return;
          var index = currentSel.selectedIndex;
          if(direction){//up
              if(index==0) return;

              var value = currentSel.options[index-1].value;
              var text = currentSel.options[index-1].text;

              currentSel.options[index-1].value = currentSel.options[index].value;
              currentSel.options[index-1].text = currentSel.options[index].text;

              currentSel.options[index].value = value;
              currentSel.options[index].text = text;

              currentSel.options[index].selected = false;
              currentSel.options[index-1].selected = true;
          }else{//down
              if(index==(currentSel.length-1)) return;

              var value = currentSel.options[index+1].value;
              var text = currentSel.options[index+1].text;

              currentSel.options[index+1].value = currentSel.options[index].value;
              currentSel.options[index+1].text = currentSel.options[index].text;

              currentSel.options[index].value = value;
              currentSel.options[index].text = text;

              currentSel.options[index].selected = false;
              currentSel.options[index+1].selected = true;
          }
      }
    function moveRight(src,des){
        if(src.selectedIndex==-1){
            alert("Please select first!");
            return;
        }
        for(var i=0;i<src.length;i++){
            if(src[i].selected){
                var op = document.createElement("option");
                op.value = src.options[src.selectedIndex].value;
                op.text = src.options[src.selectedIndex].text;
                des.options.add(op);
                    src.remove(i);
                    i--;
            }
        }
    }
    function setButton(obj){
            if(obj.length==0) return;
            currentSel = obj;
        if(obj.id=="leftSel"){
            document.getElementById("btnLeft").disabled = true;
                document.getElementById("btnRight").disabled = false;

                reSelect(document.getElementById("rightSel"));
        }else{
            document.getElementById("btnLeft").disabled = false;
            document.getElementById("btnRight").disabled = true;

            reSelect(document.getElementById("leftSel"));
        }
    }

    function reSelect(obj){
        for(var i=0; i<obj.length; i++){
            if(obj[i].selected) obj[i].selected = false;
        }
    }
    </script>
</HEAD>

<BODY>
  <form id="form1">
      <table width="40%" align="center">
          <tr>
              <td>
                  <input type="button" value=" Up " id="btnUp" onClick="move(true);" style="width:65"/>
                <br />
                <input type="button" value=" Down " id="btnDowm" onClick="move(false);" style="width:65" />
              </td>
              <td>
                  <select multiple id="leftSel" onclick="setButton(this)" ondblclick="document.getElementById('btnRight').click()" style="height:200px;width:100px;">
                    <optgroup label="Left List" />
                    <option value="1">Java</option>
                    <option value="2">JavaScript</option>
                    <option value="3">C++</option>
                    <option value="4">HTML</option>
                </select>
            </td>
            <td>
                <input type="button" value=" >> " id="btnRight" onClick="move(document.getElementById('leftSel'),document.getElementById('rightSel'));" style="width:65" />
                <br />
                <input type="button" value=" << " id="btnLeft" onClick="move(document.getElementById('rightSel'),document.getElementById('leftSel'));" style="width:65" />
                </td>
                <td>
                    <select multiple id="rightSel" onclick="setButton(this)" ondblclick="document.getElementById('btnLeft').click()" style="height:200px;width:100px;" >
                    <optgroup label="Right List" />
                    <option value="5">CSS</option>
                    <option value="6">.Net</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</BODY>
</HTML>

刷新页面返回顶部

【认真工作，享受生活】

公告