實現(xiàn)了在兩個多選框內(nèi)移動數(shù)據(jù)項的功能.doc

實現(xiàn)了在兩個多選框內(nèi)移動數(shù)據(jù)項的功能在網(wǎng)頁區(qū)添加以下代碼 .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+; 在網(wǎng)頁區(qū)添加以下代碼 Finland France Mexico Norway Spain United Kingdom Canada Germany United States createMovableOptions(fromBox,toBox,500,300,Available countries,Selected countries); 程序調(diào)用說明： 首先類似下面的代碼創(chuàng)建兩個多選框 Finland France Mexico Norway Spain United Kingdom Canada Germany United States 然后調(diào)用一個Javascript函數(shù)進行初始化 createMovableOptions(fromBox,toBox,500,30