两个ListBox控件内容互换

zoukankan html css js c++ java

两个ListBox控件内容互换

<html>

  <head>
  <meta   http-equiv="Content-Type"   content="text/html;   charset=UTF-8">
  <title>Page   Selection</title>
  <style>
  td{white-space:nowrap};
  body{margin-left:0;margin-right:0;margin-top=0;margin-bottom=0};
  </style>





  <script   language=javascript>



/*
    向下移动
*/
function moveUp(theObj)
{
    for(var i=1;i<theObj.length;i++)
    {
        if( theObj.options[i].selected && !theObj.options[i-1].selected   )
        {
            var tempOption=new Option(theObj.options[i-1].text,theObj.options[i-1].value);
            theObj.options[i-1].removeNode(true);
            theObj.add(tempOption,i);
        }
    }
}

/*
    向下移动
*/
function moveDown(theObj)
{
    for(var i=theObj.length-2;i>-1;i--)
    {
        if( theObj.options[i].selected && !theObj.options[i+1].selected)
        {
            var tempOption=new Option(theObj.options[i].text,theObj.options[i].value);
            theObj.options[i].removeNode(true);
            theObj.add(tempOption,i+1);
            theObj.options[i+1].selected=true;
        }
    }
}


/*
*  向右，或向左移动
**/
function moveLeftOrRight(fromObj,toObj)
{
    var lengthOfToObj=toObj.length;
    for(var i=fromObj.length-1;i>-1;i--)
    {
        if(fromObj.options[i].selected)
        {
            toObj.add(new Option(fromObj.options[i].text,fromObj.options[i].value),lengthOfToObj);
            toObj.options[lengthOfToObj].selected=true;
            fromObj.options[i].removeNode(true);
        }
    }
}



  </script>



  </head>

  <body   bgcolor=eeeeee>



  <table>
  <tr   >
  <td>
  <select   name=SrcSelect   size=6  ondblclick="moveLeftOrRight(document.all.SrcSelect,document.all.ObjSelect);";  style="font-size:11pt;width=200;height=160px"   multiple   >
  <option   value="1">test1</option>
  <option   value="2">test2</option>
  <option   value="3">test3</option>
  <option   value="4">test4</option>
  <option   value="5">test5</option>
  <option   value="6">test6</option>
  </select>
  </td>
  <td   align="center">
  <input   align="left"   type=button   value="→"     onclick="moveLeftOrRight(document.all.SrcSelect,document.all.ObjSelect)"     ><br><br>
  <input   align="left"   type=button   value="←"     onclick="moveLeftOrRight(document.all.ObjSelect,document.all.SrcSelect)"     >
  </td>
  <td>
  <select   name=ObjSelect   size=6   style="font-size:11pt;width=200;height=160px"   multiple   >
  <option   value="11">test11</option>
  <option   value="12">test12</option>
  <option   value="13">test13</option>
  <option   value="14">test14</option>
  <option   value="15">test15</option>
  <option   value="16">test16</option>
  </select>
  </td>
  <td>
  <input   type=button   value="↑"     onclick="moveUp(document.all.ObjSelect)"   ><br><br>
  <input   type=button   value="↓"     onclick="moveDown(document.all.ObjSelect)"   >
  </td>
  </tr>
  </table>
  </body>
</html>

查看全文

相关阅读:
ES6数组的扩展--Array.from()和Array.of()
前端面试中的各种方法实现
 理解 JavaScript call()/apply()/bind()
【前端面试】变量和类型计算
 Kubernetes1.3新特性：支持GPU
撸了一个微信小程序项目
 微信开发（调用各种接口）
Android 神兵利器之通过解析网页获取到的API数据合集，可拿来就用
 Kubernetes1.4正式发布
 Kubernetes1.4即将发布

原文地址：https://www.cnblogs.com/chengulv/p/759922.html