使用javascript实现ListBox左右全选,单选,多选,全请

  

复制代码 代码如下:

  <html>

  <head>

  <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">

  <title>list测试</title>

  </head>

  <body>

  <div style="font-size: 10pt;">

  注1:左右移动进行选取

  <br />

  <br />

  注:本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。

  <br />

  <hr />

  </div>

  <form name="frm">

  <table>

  <tr>

  <td>

  <select name="SrcSelect" size="6" style="font-size: 11pt; width: 160px; height: 160px"

  multiple="multiple" ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">

  <option value="1">讲师</option>

  </select>

  </td>

  <td width="30px">

  <input align="left" type="button" value="> " onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect) ">

  <br>

  <br>

  <input align="left" type="button" value=" < " onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">

  </td>

  <td>

  <select name="ObjSelect" size="6" style="font-size: 11pt; width: 160px; height: 160px"

  multiple="multiple" ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect) ">

  <option value="2">教学管理员</option>

  <option value="3">超级管理员</option>

  </select>

  </td>

  </tr>

  </table>

  </form>

  </body>

  <script type="text/javascript" language="javascript">

  //上移

  function moveUp() {

  var theObjOptions = document.frm.ObjSelect.options;

  for (var i = 1; i < theObjOptions.length; i++) {

  if (theObjOptions[i].selected && !theObjOptions[i - 1].selected) {

  swapOptionProperties(theObjOptions[i], theObjOptions[i - 1]);

  }

  }

  }

  //下移

  function moveDown() {

  var theObjOptions = document.frm.ObjSelect.options;

  for (var i = theObjOptions.length - 2; i > -1; i--) {

  if (theObjOptions[i].selected && !theObjOptions[i + 1].selected) {

  swapOptionProperties(theObjOptions[i], theObjOptions[i + 1]);

  }

  }

  }

  function swapOptionProperties(option1, option2) {

  var tempStr = option1.value;

  option1.value = option2.value;

  option1.value = tempStr;

  tempStr = option1.text;

  option1.text = option2.text;

  option2.text = tempStr;

  tempStr = option1.selected;

  option1.selected = option2.selected;

  option2.selected = tempStr;

  }

  //列表框的位置移动

  function moveLeftOrRight(fromObj, toObj) {

  for (var i = 0; i < fromObj.length; i++) {

  var srcOption = fromObj.options[i];

  if (srcOption.selected) {

  toObj.appendChild(srcOption);

  i--;

  }

  }

  }

  </script>