javascript 列表 多选 左右移动

3537阅读　0评论2012-04-21　ztguang
分类：系统运维

http://blog.csdn.net/idonotknowwhatislife/article/details/6146634

[c-sharp] view plaincopy
  1. 使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。  
  2. 将下面的代码存成html文件，运行就可看到效果。  
  3.  "javascript">  
  4.  /*************************************************************************************************************** 
  5.   * 文 件 名：selectListTools.js  
  6.   * 文件描述：关于list列表框的一些工具方法 
  7.   * 主要方法： 
  8.   *          1， moveUp(oSelect,isToTop) －－－－－－－－－－－－ 向上移动一个list列表框的选中项目， 
  9.   *                                                                可以支持多选移动，可以设置是否移动到顶层 
  10.   *          2， moveDown(oSelect,isToBottom)－－－－－－－－－－ 向下移动一个list列表框的选中项目， 
  11.   *                                                                可以支持多选移动，可以设置是否移动到底层 
  12.   *          3， moveSelected(oSourceSel,oTargetSel) －－－－－－ 在两个列表框之间转移数据 
  13.   *          4， moveAll(oSourceSel,oTargetSel)－－－－－－－－－ 转移两个列表框之间的全部数据 
  14.   *          5， deleteSelectItem(oSelect) －－－－－－－－－－－ 删除所选的项目 
  15.   *  
  16.  ****************************************************************************************************************/  
  17.     
  18.  /** 
  19.   * 使选中的项目上移 
  20.   * 
  21.   * oSelect: 源列表框 
  22.   * isToTop: 是否移至选择项到顶端，其它依次下移， 
  23.   *          true为移动到顶端，false反之，默认为false 
  24.   */  
  25.  function moveUp(oSelect,isToTop)  
  26.  {  
  27.      //默认状态不是移动到顶端  
  28.      if(isToTop == null)  
  29.          var isToTop = false;  
  30.            
  31.      //如果是多选------------------------------------------------------------------  
  32.      if(oSelect.multiple)  
  33.      {  
  34.          for(var selIndex=0; selIndex
  35.          {  
  36.              //如果设置了移动到顶端标志  
  37.              if(isToTop)  
  38.              {  
  39.                  if(oSelect.options[selIndex].selected)  
  40.                  {  
  41.                      var transferIndex = selIndex;  
  42.                      while(transferIndex > 0 && !oSelect.options[transferIndex - 1].selected)  
  43.                      {  
  44.                          oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex - 1]);  
  45.                          transferIndex --;  
  46.                      }  
  47.                  }  
  48.              }  
  49.              //没有设置移动到顶端标志  
  50.              else  
  51.              {  
  52.                  if(oSelect.options[selIndex].selected)  
  53.                  {  
  54.                      if(selIndex > 0)  
  55.                      {  
  56.                          if(!oSelect.options[selIndex - 1].selected)  
  57.                              oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);  
  58.                      }  
  59.                  }  
  60.              }  
  61.          }  
  62.      }  
  63.      //如果是单选--------------------------------------------------------------------  
  64.      else  
  65.      {  
  66.          var selIndex = oSelect.selectedIndex;  
  67.          if(selIndex <= 0)  
  68.              return;  
  69.          //如果设置了移动到顶端标志  
  70.          if(isToTop)  
  71.          {  
  72.              while(selIndex > 0)  
  73.              {  
  74.                  oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);  
  75.                  selIndex --;  
  76.              }  
  77.          }  
  78.          //没有设置移动到顶端标志  
  79.          else          
  80.              oSelect.options[selIndex].swapNode(oSelect.options[selIndex - 1]);  
  81.      }  
  82.  }  
  83. /** 
  84.   * 使选中的项目下移 
  85.   * 
  86.   * oSelect: 源列表框 
  87.   * isToTop: 是否移至选择项到底端，其它依次上移， 
  88.   *          true为移动到底端，false反之，默认为false 
  89.   */  
  90.  function moveDown(oSelect,isToBottom)  
  91.  {  
  92.      //默认状态不是移动到顶端  
  93.      if(isToBottom == null)  
  94.          var isToBottom = false;  
  95.            
  96.      var selLength = oSelect.options.length - 1;  
  97.        
  98.      //如果是多选------------------------------------------------------------------  
  99.      if(oSelect.multiple)  
  100.      {  
  101.          for(var selIndex=oSelect.options.length - 1; selIndex>= 0; selIndex--)  
  102.          {  
  103.              //如果设置了移动到顶端标志  
  104.              if(isToBottom)  
  105.              {  
  106.                  if(oSelect.options[selIndex].selected)  
  107.                  {  
  108.                      var transferIndex = selIndex;  
  109.                      while(transferIndex < selLength && !oSelect.options[transferIndex + 1].selected)  
  110.                      {  
  111.                          oSelect.options[transferIndex].swapNode(oSelect.options[transferIndex + 1]);  
  112.                          transferIndex ++;  
  113.                      }  
  114.                  }  
  115.              }  
  116.              //没有设置移动到顶端标志  
  117.              else  
  118.              {  
  119.                  if(oSelect.options[selIndex].selected)  
  120.                  {  
  121.                      if(selIndex < selLength)  
  122.                      {  
  123.                          if(!oSelect.options[selIndex + 1].selected)  
  124.                              oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);  
  125.                      }  
  126.                  }  
  127.              }  
  128.          }  
  129.      }  
  130.      //如果是单选--------------------------------------------------------------------  
  131.      else  
  132.      {  
  133.          var selIndex = oSelect.selectedIndex;  
  134.          if(selIndex >= selLength - 1)  
  135.              return;  
  136.          //如果设置了移动到顶端标志  
  137.          if(isToBottom)  
  138.          {  
  139.              while(selIndex < selLength - 1)  
  140.              {  
  141.                  oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);  
  142.                  selIndex ++;  
  143.              }  
  144.          }  
  145.          //没有设置移动到顶端标志  
  146.          else          
  147.              oSelect.options[selIndex].swapNode(oSelect.options[selIndex + 1]);  
  148.      }  
  149.  }  
  150. /** 
  151.   * 移动select的部分内容,必须存在value，此函数以value为标准进行移动 
  152.   * 
  153.   * oSourceSel: 源列表框对象  
  154.   * oTargetSel: 目的列表框对象 
  155.   */  
  156.  function moveSelected(oSourceSel,oTargetSel)  
  157.  {  
  158.      //建立存储value和text的缓存数组  
  159.      var arrSelValue = new Array();  
  160.      var arrSelText = new Array();  
  161.      //此数组存贮选中的options，以value来对应  
  162.      var arrValueTextRelation = new Array();  
  163.      var index = 0;//用来辅助建立缓存数组  
  164.        
  165.      //存储源列表框中所有的数据到缓存中，并建立value和选中option的对应关系  
  166.      for(var i=0; i
  167.      {  
  168.          if(oSourceSel.options[i].selected)  
  169.          {  
  170.              //存储  
  171.              arrSelValue[index] = oSourceSel.options[i].value;  
  172.              arrSelText[index] = oSourceSel.options[i].text;  
  173.              //建立value和选中option的对应关系  
  174.              arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];  
  175.              index ++;  
  176.          }  
  177.      }  
  178.        
  179.      //增加缓存的数据到目的列表框中，并删除源列表框中的对应项  
  180.      for(var i=0; i
  181.      {  
  182.          //增加  
  183.          var oOption = document.createElement("option");  
  184.          oOption.text = arrSelText[i];  
  185.          oOption.value = arrSelValue[i];  
  186.          oTargetSel.add(oOption);  
  187.          //删除源列表框中的对应项  
  188.          oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);  
  189.      }  
  190.  }  
  191. /** 
  192.   * 移动select的整块内容 
  193.   * 
  194.   * oSourceSel: 源列表框对象  
  195.   * oTargetSel: 目的列表框对象 
  196.   */  
  197.  function moveAll(oSourceSel,oTargetSel)  
  198.  {  
  199.      //建立存储value和text的缓存数组  
  200.      var arrSelValue = new Array();  
  201.      var arrSelText = new Array();  
  202.        
  203.      //存储所有源列表框数据到缓存数组  
  204.      for(var i=0; i
  205.      {  
  206.          arrSelValue[i] = oSourceSel.options[i].value;  
  207.          arrSelText[i] = oSourceSel.options[i].text;  
  208.      }  
  209.        
  210.      //将缓存数组的数据增加到目的select中  
  211.      for(var i=0; i
  212.      {  
  213.          var oOption = document.createElement("option");  
  214.          oOption.text = arrSelText[i];  
  215.          oOption.value = arrSelValue[i];  
  216.          oTargetSel.add(oOption);  
  217.      }  
  218.        
  219.      //清空源列表框数据，完成移动  
  220.      oSourceSel.innerHTML = "";  
  221.  }  
  222. /** 
  223.   * 删除选定项目 
  224.   * 
  225.   * oSelect: 源列表框对象  
  226.   */  
  227.  function deleteSelectItem(oSelect)  
  228.  {  
  229.      for(var i=0; i
  230.      {  
  231.          if(i>=0 && i<=oSelect.options.length-1 && oSelect.options[i].selected)  
  232.          {  
  233.              oSelect.options[i] = null;  
  234.              i --;  
  235.          }  
  236.      }  
  237.  }  
  238. //js文件完毕  
  239.    
  240.  "Content-Type" content="text/html; charset=gb2312">  
  241.  "font-size:12px" mce_style="font-size:12px">  
  242.  "form1" method="post" action="">  
  243.    "left" size="10" id="select" multiple style="width:100px; ">  
  244.      "aaaaa">aaaaa  
  245.      "bbbbb">bbbbb  
  246.      "ccccc">ccccc  
  247.      
  248.    "border:1px solid black " mce_style="border:1px solid black " type="button" value=">>>" onClick="moveSelected(document.all.left,document.all.right)">  
  249.    "border:1px solid black " mce_style="border:1px solid black " type="button" value="<<<" onClick="moveSelected(document.all.right,document.all.left)">  
  250.    "right" size="10" id="select" multiple style="width:100px; ">  
  251.      "ddddd">ddddd  
  252.      "eeeee">eeeee  
  253.      "fffff">fffff  
  254.      "ggggg">ggggg  
  255.      "hhhhh">hhhhh  
  256.      "iiiii">iiiii  
  257.      
  258.    



      
  259.    "background-color:#CCCCCC;padding:2px" mce_style="background-color:#CCCCCC;padding:2px">  
  260.    "border:1px solid black " mce_style="border:1px solid black " type="button" value="上移一格" onClick="moveUp(document.all.right);moveUp(document.all.left)">  
  261.    "border:1px solid black " mce_style="border:1px solid black " type="button" value="下移一格" onClick="moveDown(document.all.right);moveDown(document.all.left)">  
  262.    "border:1px solid black " mce_style="border:1px solid black " type="button" value="上移到顶"   
  263.  onClick="moveUp(document.all.right,true);moveUp(document.all.left,true)">  
  264.    "border:1px solid black " mce_style="border:1px solid black " type="button" value="下移到顶"   
  265.  onClick="moveDown(document.all.right,true);moveDown(document.all.left,true);">  （支持多选移动）  
  266.    
  
  •    

      
  •    "background-color:#CCCCCC; padding:5px; width:100%; position:relative">  
  •    右移："radio" name="ifAll" value="right" checked> 
      
  •    左移："radio" name="ifAll" value="left">

      
  •    "button" value="移动全部" style="border:1px solid black " mce_style="border:1px solid black " onClick="judgeMove()">   
  •    
    •   
  •    

      
  •    "background-color:#CCCCCC; padding:5px" mce_style="background-color:#CCCCCC; padding:5px">  
  •        "button" value=" 删 除 " style="border:1px solid black " mce_style="border:1px solid black "   
  •  onClick="deleteSelectItem(document.all.left);deleteSelectItem(document.all.right)">  
  •      
  •    
  •    
  •  "javascript">  
  •  function judgeMove()  
  •  {  
  •      var arrRadio = document.all.ifAll;  
  •      var valOfRadio;  
  •      for(var i=0; i
  •      {  
  •          if(arrRadio[i].checked)  
  •          {  
  •              valOfRadio = arrRadio[i].value;  
  •              break;  
  •          }  
  •      }  
  •      if(valOfRadio == "left")  
  •          moveAll(document.all.right,document.all.left);  
  •      if(valOfRadio == "right")  
  •          moveAll(document.all.left,document.all.right);  
  •  }  
  •    
    •  
    上一篇：linux 2.6 一个简单的字符驱动程序
    下一篇：mysql 去除重复 Select中DISTINCT关键字的用法