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

最新推荐文章于 2023-06-21 17:08:56 发布

majianan

最新推荐文章于 2023-06-21 17:08:56 发布

阅读量3.1k

点赞数

分类专栏：【01】JavaScript 【06】SourceCode 文章标签： javascript button function null .net html

本文链接：https://blog.youkuaiyun.com/majianan/article/details/3614255

版权

【01】JavaScript 同时被 2 个专栏收录

18 篇文章

订阅专栏

【06】SourceCode

11 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript实现列表元素在Select选项之间的上下左右移动，支持一次选择多个选项进行操作。文章提供了具体的代码示例，适合学习JavaScript和HTML交互的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

马嘉楠 2008-12-26

共同学习，欢迎转载。转载请注明地址【http://blog.youkuaiyun.com/majianan/archive/2008/12/26/3614255.aspx】，谢谢O(∩_∩)O！

功能如下：

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

代码如下：

<!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>