多选列表框动态添加,移动,删除,全选等操作的简单实例

  

复制代码 代码如下:

  <%

  dim a

  a = split(Request.Form("sourceList"),",")

  Response.Write "Source:" & Request.Form("sourceList") & ubound(a) & "<br>Object:" & Request.Form("objectList") & "<br>"

  %>

  <html>

  <head>

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

  <title>Untitled Document</title>

  <STYLE type=text/css>

  .bgsubleft {

  BACKGROUND-POSITION: center bottom; BACKGROUND-IMAGE: url(images/bgleft.gif); BACKGROUND-REPEAT: repeat-x

  }

  .bgsubleftn {

  BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(images/bgleftn.gif); BACKGROUND-REPEAT: no-repeat

  }

  </STYLE>

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

  function addSelectedList()

  {

  var objSource = form1.sourceList;

  var objObject = form1.objectList;

  var sourcelen = objSource.length ;

  for(var i=0;i<sourcelen;i++){

  if (objSource.options[i].selected){

  if (!checkExist(objObject,objSource.options[i].value)){

  addtolist(objObject,objSource.options[i].text,objSource.options[i].value);

  }

  }

  }

  }

  function addAllList()

  {

  var objSource = form1.sourceList;

  var objObject = form1.objectList;

  var sourcelen = objSource.length ;

  for(var i=0;i<sourcelen;i++){

  if (!checkExist(objObject,objSource.options[i].value)){

  addtolist(objObject,objSource.options[i].text,objSource.options[i].value);

  }

  }

  }

  function removeSelectedList(noRemoveValue)

  {

  var objObject = form1.objectList;

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

  if (objObject.options[i].selected && objObject.options[i].value != noRemoveValue)

  {

  objObject.options.remove(i);

  removeList(noRemoveValue);break;

  }

  }

  }

  function removeAllList(noRemoveValue)

  {

  var objObject = form1.objectList;

  var objLen = objObject.length;

  for (var i=0;i<objLen;i++){

  if ( objObject.options[i].value != noRemoveValue){

  objObject.options.remove(i);

  removeAllList(noRemoveValue);break;

  }

  }

  }

  function selectedAll(obj)

  {

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

  obj.options[i].selected = true;

  }

  }

  function checkExist(obj,value)

  {

  var isExist = false;

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

  if (obj.options[i].value == value){

  isExist = true;

  break;

  }

  }

  return isExist;

  }

  function addtolist(obj,value,label){

  obj.add(new Option(value,label));

  }

  </script>

  </head>

  <body bgcolor="#FFFFFF">

  <form name="form1" action="temp.asp" method="post">

  <table width="200" border="0" cellspacing="0" cellpadding="0">

  <tr>

  <td><select name="sourceList" size="10" multiple id="sourceList" style="width:150">

  <option value="a">1</option>

  <option value="b">2</option>

  <option value="c">3</option>

  <%

  for i = 6 to 20

  Response.Write("<option value=""" & i+200 & """>" & i+200 & "</option>" & vbcrlf)

  Next

  %>

  </select></td>

  <td><input name="add" type="button" id="add" value="Add" onclick="addSelectedList()" style="width:100"><br>

  <input name="add" type="button" id="add" value="Add all" onclick="addAllList()" style="width:100"><br>

  <input name="add" type="button" id="add" value="Remove" onclick="removeSelectedList('a')" style="width:100"><br>

  <input name="add" type="button" id="add" value="Remove all" onclick="removeAllList('a')" style="width:100">

  <input name="add" type="button" id="add" value="Select all" onclick="selectedAll(form1.objectList)" style="width:100"></td>

  <td><select name="objectList" size="10" multiple id="objectList" style="width:150">

  <option value="a">1</option>

  <option value="d">4</option>

  <option value="e">5</option>

  <%

  for i = 6 to 20

  Response.Write("<option value=""" & i & """>" & i & "</option>" & vbcrlf)

  Next

  %>

  </select></td>

  </tr>

  <tr>

  <td></td>

  <td><input name="subm" type="submit" value="Submit" style="width:100"></td>

  <td> </td>

  </tr>

  </table>

  </form>

  </body>

  </html>