萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 多選列表框動態添加,移動,刪除,全選等操作的簡單實例

多選列表框動態添加,移動,刪除,全選等操作的簡單實例

 本篇文章主要是對多選列表框動態添加,移動,刪除,全選等操作的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助

 代碼如下: <% 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>
copyright © 萬盛學電腦網 all rights reserved