javascript 操作 listbox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> js操作listbox示例 </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <mce:script language='javascript'><!-- /**********************操作ListBox的相关函数***START*********************/ /* * 把源列表sourcelist中的所有内容移到目标列表targetlist中去 */ function moveAll(sourceList, targetList){ var lst1=window.document.getElementById(sourceList); var lst2=window.document.getElementById(targetList); var length = lst1.options.length; for(var i=0;i<length;i++) { var v = lst1.options[i].value; var t = lst1.options[i].text; if(!hasValue(targetList,v)){ //目录列表中没有当前值,则加入 lst2.options[lst2.options.length] = new Option(t,v,true,true); } } //把源列表中的内容移除 removeAll(sourceList); } /* * 将id为listId的列表中的内容全部移除 */ function removeAll(listId) { var lst=window.document.getElementById(listId); var length = lst.options.length; for(var i=length;i>0;i--) { lst.options[i-1].parentNode.removeChild(lst.options[i-1]); } } /* * 将sourceList中的选中项移动到targetList中去 */ function moveSelect(sourceList, targetList) { var lst1=window.document.getElementById(sourceList); var lst2=window.document.getElementById(targetList); var length = lst1.options.length; for(var i=0;i<length;i++){ var lstindex=lst1.selectedIndex; if(lstindex<0) return; var v = lst1.options[lstindex].value; var t = lst1.options[lstindex].text; if(!hasValue(targetList,v)){ lst2.options[lst2.options.length] = new Option(t,v,true,true); } removeSelect(sourceList); } } /* * 删除列表listId中的选中项(删除的为索引值最小的一项) */ function removeSelect(listId) { var lst2=window.document.getElementById(listId); var lstindex=lst2.selectedIndex; if(lstindex>=0) { var v = lst2.options[lstindex].value+";"; lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]); } } /* * 判断id为listId列表中有没有给定的值v */ function hasValue(listId,v){ var lst = window.document.getElementById(listId); var length = lst.options.length; for(var i = 0; i < length; i++){ var vv = lst.options[i].value; if(v == vv){ return true; } } return false; } /**********************操作ListBox的相关函数***END*********************/ // --></mce:script> <h3>用javascript操作listbox示例</h3> <form action='#'> <table> <tr> <td> <select id='source' multiple='true' style='width:100px;height:120px'> <option value='ding0'>ding0</option> <option value='ding1'>ding1</option> <option value='ding2'>ding2</option> <option value='ding3'>ding3</option> <option value='ding4'>ding4</option> </select> </td> <td width='50' align='center'> <table> <tr><td><input type='button' value='>>' onclick='moveAll("source","target");'/></td></tr> <tr><td><input type='button' value=' > ' onclick='moveSelect("source","target");'/></td></tr> <tr><td><input type='button' value=' < ' onclick='moveSelect("target","source");'/></td></tr> <tr><td><input type='button' value='<<' onclick='moveAll("target","source");'/></td></tr> </table> </td> <td> <select id='target' multiple='true' style='width:100px;height:120px'> </select> </td> </tr> </table> </form> </BODY> </HTML>   

你可能感兴趣的:(JavaScript,html,function,table,button,generator)