zoukankan      html  css  js  c++  java
  • 择左边多选框的值移动到右边多选框

    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="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="192px; ">&nbsp;</SELECT>
        </td>
    </tr>
    </table>
  • 相关阅读:
    Objects类源码详解(基于jdk1.8.0_261)
    Object类源码详解(基于jdk1.8.0_261)
    Collections工具类源码详解(基于jdk1.8.0_261)
    版本控制神器——git的基本使用
    数据结构练习1~插入排序~
    求指错啊急是求幂的
    编完了个代码大家给看看还能不能精简
    关于KMP算法
    有网友建议写一个新手指南或者FAQ一类的置顶你们认为呢
    c语言新手编程错误求解
  • 原文地址:https://www.cnblogs.com/xiaotao123/p/3503992.html
Copyright © 2011-2022 走看看