zoukankan      html  css  js  c++  java
  • jquery以及js实现option左移右移

    <table cellspacing="1" width="350px" align="center">
    			       <tr>
    			        <td>
    			        <table style="background-color:white" width="100%">
    			            <tr>
    			                <td>
    				                <fieldset>
    				                	<legend>审核人员</legend>
    					                <select name="left_select" multiple="multiple" size="10" id="left_select" style="width : 152px">
    					                </select>
    					             </fieldset>
    			                </td>
    			                <td>
    			              		<input type="button" value="<" style="font-size:10pt;35px" onclick="left()"><br>
    			              		<input type="button" value="<<" style="font-size:10pt;35px" onclick="left(true)"><br>
    				                <input type="button" value=">" style="font-size:10pt;35px" onclick="right()"><br>
    				                <input type="button" value=">>" style="font-size:10pt;35px" onclick="right(true)"><br>
    			                </td>
    			                <td>
    			                	<fieldset>
    			                		<legend>系统人员</legend>
    				                	<select name="right_select" multiple="multiple" style="width : 152px" size="10" id="right_select">
    				                		<option value="zhangsan">zhangsan</option>
    				                		<option value="lisi">lisi</option>
    				                		<option value="lisi">lisi</option>
    				                		<option value="wangwu">wangwu</option>
    				                	</select>
    			                	</fieldset>
    			                </td>
    			            </tr>
    			        </table>
    			        </td>
    		         </tr>
    		     </table>

    界面如下图

    首先jquery第一种方法:

    //isAll 是否全部移动
    function left(isAll){
    	var os = new Array();
    	os = $("#right_select").find("option");
    	for(i=0;i<os.length;i++){
    		if(isAll){
    			var o = new Option(os[i].text,os[i].value);
    			$("#left_select").append(o);
    			$("#right_select").find("option").remove();
    			// == $("#right_select").empty();
    		}else{
    			if(os[i].selected){
    				var o = new Option(os[i].text,os[i].value);
    				$("#left_select").append(o);
    				$("#right_select").find("option:selected").remove();
    			}
    		}
    	}
    }
    function right(isAll){
    	var os = new Array();
    	os = $("#left_select").find("option");
    	for(i=0;i<os.length;i++){
    		if(isAll){
    			var o = new Option(os[i].text,os[i].value);
    			$("#right_select").append(o);
    			$("#left_select").find("option").remove();
    			// == $("#left_select").empty();
    		}else{
    			if(os[i].selected){
    				var o = new Option(os[i].text,os[i].value);
    				$("#right_select").append(o);
    				$("#left_select").find("option:selected").remove();
    			}
    		}
    	}
    }

    第二种方法:

    /**
     * 此方法 移动的时候会自动删除 不用手动去 remove
     * 但移走的选项会默认选中 无法取消,代码虽少,效果但不如第一种
     */
    function left(isAll){
    	var os = new Array();
    	os = $("#right_select").find("option");
    	for(i=0;i<os.length;i++){
    		if(isAll){
    			$("#left_select").append(os[i]);
    		}else{
    			if(os[i].selected){
    				$("#left_select").append(os[i]);
    			}
    		}
    	}
    }
    function right(isAll){
    	var os = new Array();
    	os = $("#left_select").find("option");
    	for(i=0;i<os.length;i++){
    		if(isAll){
    			$("#right_select").append(os[i]);
    		}else{
    			if(os[i].selected){
    				$("#right_select").append(os[i]);
    			}
    		}
    	}
    }

    JS实现如下:

    function left(isAll)
    {
        var os=new Array();
        os=document.getElementById("right_select").options;
        for(i=0;i<os.length;i++){
            if(isAll){
                var o=new Option(os[i].text,os[i].value);
                document.getElementById("left_select").add(o);
                document.getElementById("right_select").remove(i);
                i--;
            }else{
            	if(os[i].selected){
                    var o=new Option(os[i].text,os[i].value);
                    document.getElementById("left_select").add(o);
                    document.getElementById("right_select").remove(i);
                    i--;
                }
            }
        }
    }
    function right(isAll)
    {
        var os=new Array();
        os=document.getElementById("left_select").options;
        for(i=0;i<os.length;i++){
            if(isAll){
                var o=new Option(os[i].text,os[i].value);
                document.getElementById("right_select").add(o);
                document.getElementById("left_select").remove(i);
                i--;
            }else{
            	if(os[i].selected){
                    var o=new Option(os[i].text,os[i].value);
                    document.getElementById("right_select").add(o);
                    document.getElementById("left_select").remove(i);
                    i--;
                }
            }
        }
    }


  • 相关阅读:
    要开学了,暂时停更
    day13 IP包头分析 | 路由器原理 1
    day12 数据链路层 | 交换机基本命令
    day11 OSI与TCP-IP 5层协议 | 物理层相关知识
    day10 扫描与爆破
    day 09 简单渗透测试
    day07 PKI
    day07 域
    day06 WEB服务器 | FTP服务器
    day05 DHCP部署与安全 | DNS部署与安全
  • 原文地址:https://www.cnblogs.com/itmyhome/p/4131414.html
Copyright © 2011-2022 走看看