• 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--;
                }
            }
        }
    }


  • 相关阅读:
    Ruby 2
    Ruby 1
    莱布尼兹:与牛顿争吵了一生的斗士 微积分的奠基人之一―莱布尼茨
    如何实现html页面自动刷新
    css z-index的层级关系
    让网页变灰的实现_网站蒙灰CSS样式总汇
    利用CSS变量实现炫酷的悬浮效果
    离线电商数仓(十四)之系统业务数据仓库数据采集(一)电商业务简介
    离线电商数仓(十三)之用户行为数据采集(十三)采集通道启动/停止脚本
    离线电商数仓(十)之用户行为数据采集(十)组件安装(六)采集日志Flume(二)消费Kafka数据Flume
  • 原文地址:https://www.cnblogs.com/itmyhome/p/4131414.html
Copyright © 2020-2023  润新知