struts2 的optiontransferselect之js代码

在web的开发中很多时候会用到一对多的关系，在页面上就是添加一个对象时会要添加多个关联的对象。比如我添加一个呼叫组，一个呼叫组中会有多个呼叫成员。这个时候optiontransferselect就派上用场。如果用struts2做，直接用s:optiontransferselect就好了。但在不用struts2的时候，就可以借用struts2的s:optiontransferselect生成的前端js.(怎么不能添加附件，想把代码附上)

/* * $Id: optiontransferselect.js 590812 2007-10-31 20:32:54Z apetrelli $ * * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ function moveSelectedOptions(objSourceElement, objTargetElement, toSort, notMove1, notMove2) { var test1 = compile(notMove1); var test2 = compile(notMove2); moveOptions(objSourceElement, objTargetElement, toSort, function(opt) { return (opt.selected && !test1(opt.value) && !test2(opt.value)); } ); } function moveAllOptions(objSourceElement, objTargetElement, toSort, notMove1, notMove2) { var test1 = compile(notMove1); var test2 = compile(notMove2); moveOptions(objSourceElement, objTargetElement, toSort, function(opt) { return (!test1(opt.value) && !test2(opt.value)); } ); } function compile(ptn) { if (ptn != undefined) { if (ptn == '' || !window.RegExp) { return function(val) { return val == ptn; } } else { var reg = new RegExp(ptn); return function (val) { if (val == '') { // ignore empty option added by template return true; } return reg.test(val); } } } return function(val) { return false; } } function moveOptions(objSourceElement, objTargetElement, toSort, chooseFunc) { var aryTempSourceOptions = new Array(); var aryTempTargetOptions = new Array(); var x = 0; //looping through source element to find selected options for (var i = 0; i < objSourceElement.length; i++) { if (chooseFunc(objSourceElement.options[i])) { //need to move this option to target element var intTargetLen = objTargetElement.length++; objTargetElement.options[intTargetLen].text = objSourceElement.options[i].text; objTargetElement.options[intTargetLen].value = objSourceElement.options[i].value; } else { //storing options that stay to recreate select element var objTempValues = new Object(); objTempValues.text = objSourceElement.options[i].text; objTempValues.value = objSourceElement.options[i].value; aryTempSourceOptions[x] = objTempValues; x++; } } //sorting and refilling target list for (var i = 0; i < objTargetElement.length; i++) { var objTempValues = new Object(); objTempValues.text = objTargetElement.options[i].text; objTempValues.value = objTargetElement.options[i].value; aryTempTargetOptions[i] = objTempValues; } if (toSort) { aryTempTargetOptions.sort(sortByText); } for (var i = 0; i < objTargetElement.length; i++) { objTargetElement.options[i].text = aryTempTargetOptions[i].text; objTargetElement.options[i].value = aryTempTargetOptions[i].value; objTargetElement.options[i].selected = false; } //resetting length of source objSourceElement.length = aryTempSourceOptions.length; //looping through temp array to recreate source select element for (var i = 0; i < aryTempSourceOptions.length; i++) { objSourceElement.options[i].text = aryTempSourceOptions[i].text; objSourceElement.options[i].value = aryTempSourceOptions[i].value; objSourceElement.options[i].selected = false; } } function sortByText(a, b) { if (a.text < b.text) {return -1} if (a.text > b.text) {return 1} return 0; } function selectAllOptionsExceptSome(objTargetElement, type, ptn) { var test = compile(ptn); for (var i = 0; i < objTargetElement.length; i++) { var opt = objTargetElement.options[i]; if ((type == 'key' && !test(opt.value)) || (type == 'text' && !test(opt.text))) { opt.selected = true; } else { opt.selected = false; } } return false; } function selectAllOptions(objTargetElement) { for (var i = 0; i < objTargetElement.length; i++) { if (objTargetElement.options[i].value != '') { objTargetElement.options[i].selected = true; } } return false; } function moveOptionUp(objTargetElement, type, ptn) { var test = compile(ptn); for (i=0; i<objTargetElement.length; i++) { if (objTargetElement[i].selected) { var v; if (i != 0 && !objTargetElement[i-1].selected) { if (type == 'key') { v = objTargetElement[i-1].value } else { v = objTargetElement[i-1].text; } if (!test(v)) { swapOptions(objTargetElement,i,i-1); } } } } } function moveOptionDown(objTargetElement, type, ptn) { var test = compile(ptn); for (i=(objTargetElement.length-1); i>= 0; i--) { if (objTargetElement[i].selected) { var v; if ((i != (objTargetElement.length-1)) && !objTargetElement[i+1].selected) { if (type == 'key') { v = objTargetElement[i].value } else { v = objTargetElement[i].text; } if (!test(v)) { swapOptions(objTargetElement,i,i+1); } } } } } function swapOptions(objTargetElement, first, second) { var opt = objTargetElement.options; var temp = new Option(opt[first].text, opt[first].value, opt[first].defaultSelected, opt[first].selected); var temp2= new Option(opt[second].text, opt[second].value, opt[second].defaultSelected, opt[second].selected); opt[first] = temp2; opt[second] = temp; }

上面是js文件，下面为html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <tr> <td class="tdLabel"> <label for="leftSideCartoonCharacters" class="label"> Favourite Cartoons Characters: <img src='/struts2-blank-2.1.6/struts/tooltip.gif' title="Select Your Favourite Cartoon Characters" alt="Select Your Favourite Cartoon Characters"/> </label> </td> <td> <mce:script type="text/javascript" src="./optiontransferselect.js" mce_src="optiontransferselect.js"></mce:script> <table border="0"> <tr> <td> <label for="leftTitle">Left Title</label><br /> <select name="leftSideCartoonCharacters" size="15" id="leftSideCartoonCharacters" multiple="multiple"> <option value="headerKey">--- Please Select ---</option> <option value=""></option> <option value="Popeye">Popeye</option> <option value="He-Man">He-Man</option> <option value="Spiderman">Spiderman</option> </select> <input type="button" οnclick="moveOptionDown(document.getElementById('leftSideCartoonCharacters'), 'key', 'headerKey');" value="v" /> <input type="button" οnclick="moveOptionUp(document.getElementById('leftSideCartoonCharacters'), 'key', 'headerKey');" value="^" /> </td> <td valign="middle" align="center"> <input type="button" value="<-" οnclick="moveSelectedOptions(document.getElementById('rightSideCartoonCharacters'), document.getElementById('leftSideCartoonCharacters'), false, 'doubleHeaderKey', '');" /><br /><br /> <input type="button" value="->" οnclick="moveSelectedOptions(document.getElementById('leftSideCartoonCharacters'), document.getElementById('rightSideCartoonCharacters'), false, 'headerKey', '');" /><br /><br /> <input type="button" value="<<--" οnclick="moveAllOptions(document.getElementById('rightSideCartoonCharacters'), document.getElementById('leftSideCartoonCharacters'), false, 'doubleHeaderKey', '');" /><br /><br /> <input type="button" value="-->>" οnclick="moveAllOptions(document.getElementById('leftSideCartoonCharacters'), document.getElementById('rightSideCartoonCharacters'), false, 'headerKey', '');" /><br /><br /> <input type="button" value="<*>" οnclick="selectAllOptionsExceptSome(document.getElementById('leftSideCartoonCharacters'), 'key', 'headerKey');selectAllOptionsExceptSome(document.getElementById('rightSideCartoonCharacters'), 'key', 'doubleHeaderKey');" /><br /><br /> </td> <td> <label for="rightTitle">Right Title</label><br /> <select name="rightSideCartoonCharacters" size="15" multiple="multiple" id="rightSideCartoonCharacters" > <option value="doubleHeaderKey">--- Please Select ---</option> <option value=""></option> <option value="Superman">Superman</option> <option value="Mickey Mouse">Mickey Mouse</option> <option value="Donald Duck">Donald Duck</option> </select> <input type="button" οnclick="moveOptionDown(document.getElementById('rightSideCartoonCharacters'), 'key', 'doubleHeaderKey');" value="v" /> <input type="button" οnclick="moveOptionUp(document.getElementById('rightSideCartoonCharacters'), 'key', 'doubleHeaderKey');" value="^" /> </td> </tr> </table> </td> </tr> </body> </html>