择左边多选框的值移动到右边多选框
JS代码如下: <SCRIPT language="javascript" charset="utf-8"> /** * 移动select的部分内容,必须存在value,此函数以value为标准进行移动 * oSourceSel: 源列表框对象 * oTargetSel: 目的列表框对象 */ function moveSelected(oSourceSel, oTargetSel) { //建立存储value和text的缓存数组 var arrSelValue = new Array(); var arrSelText = new Array(); //此数组存贮选中的options,以value来对应 var arrValueTextRelation = new Array(); var index = 0;//用来辅助建立缓存数组 //存储源列表框中所有的数据到缓存中,并建立value和选中option的对应关系 for ( var i = 0; i < oSourceSel.options.length; i++) { if (oSourceSel.options[i].selected) { arrSelValue[index] = oSourceSel.options[i].value; arrSelText[index] = oSourceSel.options[i].text; //建立value和选中option的对应关系 arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i]; index++; } } //增加缓存的数据到目的列表框中,并删除源列表框中的对应项 for ( var i = 0; i < arrSelText.length; i++) { var oOption = document.createElement("option"); oOption.text = arrSelText[i]; oOption.value = arrSelValue[i]; oTargetSel.add(oOption); //删除源列表框中的对应项 //oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]); } } /** * 移动select的全部内容 */ function moveAll(oSourceSel, oTargetSel) { //建立存储value和text的缓存数组 var arrSelValue = new Array(); var arrSelText = new Array(); //存储所有源列表框数据到缓存数组 for ( var i = 0; i < oSourceSel.options.length; i++) { arrSelValue[i] = oSourceSel.options[i].value; arrSelText[i] = oSourceSel.options[i].text; } //将缓存数组的数据增加到目的select中 for ( var i = 0; i < arrSelText.length; i++) { var oOption = document.createElement("option"); oOption.text = arrSelText[i]; oOption.value = arrSelValue[i]; oTargetSel.add(oOption); } //清空源列表框数据,完成移动 //oSourceSel.innerHTML = ""; } /** * 删除选定项 */ function deleteSelectItem(oSelect) { for ( var i = 0; i < oSelect.options.length; i++) { if (i >= 0 && i <= oSelect.options.length - 1 && oSelect.options[i].selected) { oSelect.options[i] = null; i--; } } } //删除右边所有数据 function deleteRightItem() { var valueRight = document.all.right; valueRight.innerHTML = ""; } //过滤重复项 function unique(data) { data = data || []; var a = new Array(); len = data.length; for ( var i = 0; i < len; i++) { var v = data[i]; if (typeof a[v] == 'undefined') { a[v] = 1; } } data.length = 0; lengt = 0; for ( var i in a) { data[lengt++] = i; } return data; } </SCRIPT>
JSP代码如下:
<table> <tr> <td><SELECT name="left" size="15" multiple style="width:192px;" ondblclick="moveSelected(document.all.left,document.all.right)">//双击移动到右边 <% while (rs.next()) { %> <OPTION value="<%=xingming%>"><%=rs.getString("xingming")%></OPTION> <% } %> </SELECT></td> <td WIDTH='83PX' align='center'> <INPUT type="button" value=" > " onClick="moveSelected(document.all.left,document.all.right)"><br><br> <INPUT type="button" value=" < " onClick="deleteSelectItem(document.all.right)"> <br><br> <INPUT type="button" value=" <<< " onClick="deleteRightItem()"> </td> <td><SELECT name="right" size="15" multiple style="width:192px; "> </SELECT> </td> </tr> </table>