实现了在两个多选框内移动数据项的功能.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=fromBoxArrayselectBoxIndex)tmpToBox = toBoxArrayselectBoxIndex; else tmpToBox = fromBoxArrayselectBoxIndex; else if(this.value.indexOf()=0) tmpFromBox = fromBoxArrayselectBoxIndex; tmpToBox = toBoxArrayselectBoxIndex; else tmpFromBox = toBoxArrayselectBoxIndex; tmpToBox = fromBoxArrayselectBoxIndex; for(var no=0;notmpFromBox.options.length;no+) if(tmpFromBox.optionsno.selected) tmpFromBox.optionsno.selected = false; tmpToBox.optionstmpToBox.options.length = new Option(tmpFromBox.optionsno.text,tmpFromBox.optionsno.value); for(var no2=no;no2(tmpFromBox.options.length-1);no2+) tmpFromBox.optionsno2.value = tmpFromBox.optionsno2+1.value; tmpFromBox.optionsno2.text = tmpFromBox.optionsno2+1.text; tmpFromBox.optionsno2.selected = tmpFromBox.optionsno2+1.selected; no = no -1; tmpFromBox.options.length = tmpFromBox.options.length-1; var tmpTextArray = new Array(); for(var no=0;notmpFromBox.options.length;no+) tmpTextArray.push(tmpFromBox.optionsno.text + _ + tmpFromBox.optionsno.value); tmpTextArray.sort(); var tmpTextArray2 = new Array(); for(var no=0;notmpToBox.options.length;no+) tmpTextArray2.push(tmpToBox.optionsno.text + _ + tmpToBox.optionsno.value); tmpTextArray2.sort(); for(var no=0;notmpTextArray.length;no+) var items = tmpTextArrayno.split(_); tmpFromBox.optionsno = new Option(items0,items1); for(var no=0;notmpTextArray2.length;no+) var items = tmpTextArray2no.split(_); tmpToBox.optionsno = new Option(items0,items1); function sortAllElement(boxRef) var tmpTextArray2 = new Array(); for(var no=0;noboxRef.options.length;no+) tmpTextArray2.push(boxRef.optionsno.text + _ + boxRef.optionsno.value); tmpTextArray2.sort(); for(var no=0;no)=0) tmpFromBox = fromBoxArrayselectBoxIndex; tmpToBox = toBoxArrayselectBoxIndex; else tmpFromBox = toBoxArrayselectBoxIndex; tmpToBox = fromBoxArrayselectBoxIndex; for(var no=0;notmpFromBox.options.length;no+) tmpToBox.optionstmpToBox.options.length = new Option(tmpFromBox.optionsno.text,tmpFromBox.optionsno.value); tmpFromBox.options.length=0; sortAllElement(tmpToBox); /* This function highlights options in the to-boxes. It is needed if the values should be remembered after submit. Call this function onsubmit for your form */ function multipleSelectOnSubmit() for(var no=0;noarrayOfItemsToSelect.length;no+) var obj = arrayOfItemsToSelectno; for(var no2=0;no2; 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 = ; buttonLeft.onclick = moveSingleElement; buttonDiv.appendChild(buttonLeft); var buttonAllLeft = document.createElement(INPUT); buttonAllLeft.type=button; buttonAllLeft.value = ; buttonAllLeft.onclick = moveAllElements; buttonDiv.appendChild(buttonAllLeft); var subDiv = document.createElement(DIV); subDiv.style.width = (Math.floor(totalWidth/2) - 15) + px; toObj.style.width = (Math.floor(totalWidth/2) - 15) + px; var label = document.createElement(SPAN); label.innerHTML = labelRight; subDiv.appendChild(label); subDiv.appendChild(toObj); parentDiv.appendChild(subDiv); toObj.style.height = (totalHeight - label.offsetHeight) + px; fromObj.style.height = (totalHeight - label.offsetHeight) + px; selectBoxIndex+; 在网页区添加以下代码 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,30