实现了在两个多选框内移动数据项的功能.doc

实现了在两个多选框内移动数据项的功能在网页区添加以下代码.multipleSelectBoxControl span{ /* Labels above select boxes*/ font-family:arial; font-size:11px; font-weight:bold; } .multipleSelectBoxControl div select{ /* Select box layout */ font-family:arial; height:100%; } .multipleSelectBoxControl input{ /* Small butons */ width:25px; } .multipleSelectBoxControl div{ float:left; } .multipleSelectBoxDiv /************************************************************************************************************ (C) , October 2005 Download from This is a script from . You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! Alf Magne Kalleland ************************************************************************************************************/ var fromBoxArray = new Array(); var toBoxArray = new Array(); var selectBoxIndex = 0; var arrayOfItemsToSelect = new Array(); function moveSingleElement() { var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^\d]/g,''); var tmpFromBox; var tmpToBox; if(this.tagName.toLowerCase()=='select'){ tmpFromBox = this; if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex]; }else{ if(this.value.indexOf('>')>=0){ tmpFromBox = fromBoxArray[selectBoxIndex]; tmpToBox = toBoxArray[selectBoxIndex]; }else{ tmpFromBox = toBoxArray[selectBoxIndex]; tmpToBox = fromBoxArray[selectBoxIndex]; } } for(var no=0;no')>=0){ tmpFromBox = fromBoxArray[selectBoxIndex]; tmpToBox = toBoxArray[selectBoxIndex]; }else{ tmpFromBox = toBoxArray[selectBoxIndex]; tmpToBox = fromBoxArray[selectBoxIndex]; } for(var no=0;no'; buttonDiv.appendChild(buttonRight); buttonRight.onclick = moveSingleElement; var buttonAllRight = document.createElement('INPUT'); buttonAllRight.type='button'; buttonAllRight.value = '>>'; buttonAllRight.onclick = moveAllElements; buttonDiv.appendChild(buttonAllRight); var buttonLeft = document.createElement('INPUT'); buttonLeft.style.marginTop='10px'; buttonLeft.type='button'; buttonLeft.value = '在网页 区添加以下代码Finland France Mexico Norway Spain United Kingdom Canada Germany United States createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); 程序调用说明： 首先类似下面的代码创建两个多选框Finland France Mexico Norway Spain United Kingdom Canada Germany United States 然后调用一个 Javascript 函数进行初始化createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries'); 该函数的各个参数说明如下： "fromBox" - 第一个多选框的 ID() "toBox" - 第二个多选框的 ID() 500 - 整个操作界面的宽度 300 - 整个操作界面的高度 "Available countries" - 第一个多选框上方的文本 "Selected countries" - 第二个多选框上方的文本 提交表单 当你点击提交按钮时只提交被选中的项目. 要实现这个功能可以为表单添加一个 OnSubmit 事件.如下:截 图 ：。