select标签的操作

最新推荐文章于 2022-01-16 21:03:33 发布
ququjioulai
最新推荐文章于 2022-01-16 21:03:33 发布
阅读量138
点赞数
分类专栏： js jquery 文章标签： XHTML HTML
js jquery 专栏收录该内容
19 篇文章 0 订阅
订阅专栏
功能为：添加批量添加删除选定后背景变色删除后背景色变回原色按要求查找

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.table {
	border-collapse: collapse; border-left: 1px solid #ccc; border-top: 1px solid #ccc;
}
.table td {
	border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 2px 5px 2px 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px; text-align: left;
}
.table th {
	border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px 3px 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px; text-align: left;
}
.table .title {
	background-color: #F0F8FF; font-weight: bold;
}
.select {
	width:80px;
}
</style>
<script type="text/javascript">
	var col="#CCCCCC";
	var fontcol="black";

	//测试数据
	var user=[{"uid":"1","uname":"宋江"},
				{"uid":"2","uname":"卢俊义"},
				{"uid":"3","uname":"吴用"},
				{"uid":"4","uname":"鲁智深"},
				{"uid":"5","uname":"武松"},
				{"uid":"6","uname":"扈三娘"},
				{"uid":"7","uname":"李俊"},
				{"uid":"8","uname":"李逵"},
				{"uid":"9","uname":"关胜"},
				{"uid":"10","uname":"燕青"},
				{"uid":"11","uname":"史进"}];

	//当用户选择后获取选择的值
	function getvalue(){
		var quan=document.getElementById("quan");
		var qu=document.getElementById("qu");

		var x=0;
		for(var i=0;i<quan.length;i++){
			if(quan[i].selected){
				//去除选中时的蓝条，只能投机取巧了
				quan.options[i]=new Option(quan[i].text,quan[i].value);
				//设置选中后的字体颜色和背景颜色
				quan[i].style.color=fontcol;
				quan[i].style.backgroundColor=col;

				var num=0;
				for(var j=0;j<qu.length;j++){

					//判断这个值被选过没，如果选过就标识为1并跳出这个循环
					if(qu[j].value==quan[i].value){
						num=1;
						break;
					}
					x++;
				}

				//不等于1表示没选中过
				if(num!=1){
					qu.options[qu.length]=new Option(quan[i].text,quan[i].value);
				}
			}
		}
		//现实选了多少人
		ren.innerText=document.getElementById("qu").length;
		//失去焦点
		quan.blur();
	}

	//删除全部的值
	function removevalue(){
		var quan=document.getElementById("quan");
		//把所有的背景色都设置为白色
		for(var i=0;i<quan.length;i++){
			quan[i].style.backgroundColor="#ffffff";
		}

		//清空选择栏
		document.getElementById("qu").options.length=0;
		ren.innerText=0;
	}

	//获取全部的值
	function getallvalue(){
		var quan=document.getElementById("quan");
		var qu=document.getElementById("qu");

		//把所有的值添加进去，已添加的不管
		for(var i=0;i<quan.length;i++){
				quan[i].style.color=fontcol;
				quan[i].style.backgroundColor=col;

				var num=0;
				for(var j=0;j<qu.length;j++){
					if(qu[j].value==quan[i].value){
						num=1;
						break;
					}
				}

				if(num!=1){
					qu.options[qu.length]=new Option(quan[i].text,quan[i].value);
				}
		}
		ren.innerText=document.getElementById("qu").length;
	}

	//初始加载测试数据
	window.onload=function(){
		var quan=document.getElementById("quan");

		for(var i=0;i<user.length;i++){
			quan.options[i]=new Option(user[i].uid+":"+user[i].uname,user[i].uid);
		}

		document.getElementById("sec").value="输入客户编号或客户名";
	}
</script>


<script>
	//删除
	function del(){
		var qu=document.getElementById("qu");
		var quan=document.getElementById("quan");
		for(var i=0;i<qu.length;i++){
			if(qu[i].selected){
				//把移除的选项所对应的地方背景色变回白色
				for(var k=0;k<quan.length;k++){
					if(qu[i].value==quan[k].value){
						quan[k].style.backgroundColor="#ffffff";
						break;
					}
				}

				var le=qu.length-1;
				for(var j=i;j<le;j++){
					var op=new Option(qu[j+1].text,qu[j+1].value);
					op.style.color=fontcol;
					qu.options[j]=op;
				}
				//移除最后一个
				qu.remove(qu.length-1);
				ren.innerText=document.getElementById("qu").length;
				qu.blur();
				return;
			}
		}
	}

	//根据用户输入查找数据
	function getsec(){
		var name=document.getElementById("sec").value;
		var quan=document.getElementById("quan");
		var qu=document.getElementById("qu");
		var num=0;
		quan.options.length=0;

		 for(var i=0;i<user.length;i++){
		 	//如果用户输入数据在id或名字中存在
		 	if(user[i].uname.indexOf(name)!=-1 || user[i].uid.indexOf(name)!=-1){
				quan.options[num]=new Option(user[i].uid+":"+user[i].uname,user[i].uid);
				for(var j=0;j<qu.length;j++){
					if(qu[j].value==user[i].uid){
						quan[num].style.color=fontcol;
						quan[num].style.backgroundColor=col;
					}
				}
				num++;
			}
		 }
	}
	//
	function checkthis1(obj){
		if(obj.value=="输入客户编号或客户名"){
			obj.value="";
		}
	}
	//
	function checkthis2(obj){
		if(obj.value==""){
			obj.value="输入客户编号或客户名";
		}
	}
</script>
</head>

<body>
<table width="742" height="598" border="0" class="table">
  <tr>
    <td width="238" style="width:202px"><div>所有人员</div><div><select size="30" style="width:200px" id="quan" onchange="getvalue()" multiple="multiple"></select></div></td>
	<td width="116" align="center">
	<label style="font-size:12px;"></label><br/>
	<input type="text" id="sec" onkeyup="getsec()" onfocus="checkthis1(this)" onblur="checkthis2(this)"/><br/><br/><br/><br/>
	<input type="button" onclick="getallvalue();" value="添加全部" /><br/><br/><br/><br/>
	<input type="button" onclick="removevalue();" value="移除全部" />
	</td>
	<td width="265" style="width:202px"><div align="right">已添加<label id="ren">0</label>人</div><div><select id="qu" size="30" style="width:200px" onchange="del();"></select></div></td>
  </tr>
</table>
</body>
</html>