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

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> &nbsp;&nbsp;&nbsp;
        <%
    }
    %>
    </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; ">&nbsp;</SELECT>
    </td>
</tr>
</table>

 

 

 

posted @ 2014-01-03 16:59  tao5310  阅读(519)  评论(0编辑  收藏  举报