选择左边多选框的值移动到右边多选框

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>




  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值