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;width:35px" onclick="left()"><br> 
			              		<input type="button" value="<<" style="font-size:10pt;width:35px" onclick="left(true)"><br> 
				                <input type="button" value=">" style="font-size:10pt;width:35px" onclick="right()"><br> 
				                <input type="button" value=">>" style="font-size:10pt;width: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--; 
            } 
        } 
    } 
}