Select左右选择、全选实现

iswift

浏览: 189391 次
性别:
来自: 上海

最近访客更多访客>>

一往无前bhz

逍遥纨绔

hanhanhuihui

vvv11222

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

select实现左右选择 select实现点击左边到右边

效果图：

html代码：

<html>
    <head>
    <title></title>
	<style type="text/css">		
		#m{list-style:none;font:12px}
		#m li{float:left}
		#m li div{width:55px;height:141px;padding-left:20px;padding-right:20px;padding-top:30px;}		
		select{width:100px;}
	</style>
	<script type="text/javascript">
		function copy(){
			var source = arguments[0] || "";
			var target = arguments[1] || "";
			var isAll = arguments[2] || false;
			if(source && target){
				if(isAll){//全选
					for(var i=0,len=source.options.length; i<len; i++){
						var v = source.options[i].value;
						var t = source.options[i].text;
						var opt = new Option(t, v);
						if(!isExists(target, opt)){
							target.options.add(opt);
							source.options.remove(i);
							i--;//移除一个，长度重新算
							len=source.options.length
						}
					}
				} else{
					for(var i=0,len=source.options.length; i<len; i++){
						if(source.options[i].selected){
							var v = source.options[i].value;
							var t = source.options[i].text;
							var opt = new Option(t, v);
							if(!isExists(target, opt)){
								target.options.add(opt);
								source.options.remove(i);
								i--;
								len=source.options.length
							}
						}
					}
				}
			}
		}
		
		//判断目标中是否存在该元素
		function isExists(target, opt){
			if(target && opt){
				for(var i=0,len=target.options.length; i < len; i++){
					if(target.options[i].value == opt.value){
						return true;
					}
				}
			}
			return false;
		}
		
		function toRight(isAll){
			var left = document.getElementsByName("left")[0];
			var right = document.getElementsByName("right")[0];
			copy(left, right, (isAll || false));
		}
		
		function toLeft(isAll){
			var left = document.getElementsByName("left")[0];
			var right = document.getElementsByName("right")[0];
			copy(right, left, (isAll || false));
		}
	</script>
    </head> 
    <body>
		<ul id="m">
			<li>
				<select name="left" size="10" multiple="multiple" ondblclick="toRight()">
					<option value="1">礼品1</option>
					<option value="2">礼品2</option>
					<option value="3">礼品3</option>
					<option value="4">礼品4</option>
					<option value="5">礼品5</option>
					<option value="6">礼品6</option>
					<option value="7">礼品7</option>
					<option value="8">礼品8</option>
				</select>
			</li>
			<li>
				<div>
					<input type="button" value="-->>" onclick="toRight()">
					<input type="button" value="==>>" onclick="toRight(true)">
					<input type="button" value="<<--" onclick="toLeft()">
					<input type="button" value="<<==" onclick="toLeft(true)">
				</div>
			</li>
			<li>
				<select name="right" size="10" multiple="multiple" ondblclick="toLeft()">
				</select>					
			</li>
		</ul>
    </body>
</html>