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


posted on 2013-08-15 21:54  itmyhome  阅读(853)  评论(0编辑  收藏  举报

导航