列表元素上下左右移动。（最近正在努力学习JavaScript中。学得很Happy，O(∩_∩)O，来散分。）

JF Happy new year!

看到了select二级菜单的帖子，就也修改了一下。
列表增加了标题"Left List"、"Right List"

【JavaScript】列表（Select）选项（Option）的移动（上下左右）
演示下载对《【JavaScript】列表元素上下左右移动：Select和Option的应用》中的方法进行了优化。1.使用appendChild（）方法优化左右移动函数moveRight（）2.使用insertBefore（）方法优化上下移动函数moveUp（）<!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 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 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) {
                var oOption = currentSel.options[index];
                var oPrevOption = currentSel.options[index-1];
                currentSel.insertBefore(oOption, oPrevOption);
            }
          }else{//down
              if (index < currentSel.options.length - 1) {
                var oOption = currentSel.options[index];
                var oNextOption = currentSel.options[index+1];
                currentSel.insertBefore(oNextOption, oOption);
            }
          }
      }    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){
                des.appendChild(src.options[i--]);
            }
        }
        setButton(des);
    }

    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>

选中两个，然后DOWN，结果不对。比如现在是：
  Java
  JavaScript(选中)
  C++(选中)
  HTML
按DOWN后，却变成了
  Java
  C++
  JavaScript(选中)
  HTML
这显然不对。正确的应该如下：
  Java
  HTML
  JavaScript(选中)
  C++(选中)

一个都没选中的时候，按UP,DOWN会脚本错误。

谢谢，问题已修改，修改了moveUp()方法
演示下载地址代码<!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 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 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;
          if(direction){//up
            if (currentSel.selectedIndex > 0) {
for(var i=0;i<currentSel.length;i++){
if(currentSel[i].selected){
var oOption = currentSel.options[i];
var oPrevOption = currentSel.options[i---1];
currentSel.insertBefore(oOption, oPrevOption);
}
}
            }
          }else{//down
for(var i=currentSel.length-1;i>=0;i--){
if(currentSel[i].selected){
if(i==currentSel.length-1) return;
var oOption = currentSel.options[i];
var oNextOption = currentSel.options[i+1];
currentSel.insertBefore(oNextOption, oOption);
}
}
          }
      }    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){
                des.appendChild(src.options[i--]);
            }
        }
        setButton(des);
    }

    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;">                    <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;" >

                    <option value="5">CSS</option>
                    <option value="6">.Net</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</BODY>
</HTML>

调试易

列表元素上下左右移动。（最近正在努力学习JavaScript中。学得很Happy，O(∩_∩)O，来散分。）

解决方案 »