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;"
οndblclick="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>