2010.04.26———弹出层选择收件人的效果-CSDN博客

本文链接：https://blog.csdn.net/cody123/article/details/83610958

2010.04.26———弹出层选择收件人的效果

在火狐下面可以正常使用，ie下面有点问题

还有一个小问题，就是不管添加的顺序如何，美女1将永远在美女2前面按数据原有的顺序

1.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title>仿QQ邮箱弹出层选择收件人的效果</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 1000px;height: 1500px;background-color:#FFFFFF;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
.white_content{display: none;position: absolute;top: 25%;left: 25%;width: 50%;height: 50%;padding: 16px;border: 16px solid orange;margin:-32px;background-color: white;z-index:1002;overflow: auto;}
.hightLight{
	background: #FF3300
}
</style>
<script language="javascript" type="text/javascript">
function dakai(){
	$('#light').css("display","block");
	$('#fade').css("display","block");
}
function guanbi(){
	$('#light').css("display","none");
	$('#fade').css("display","none");
}

var array1 = ["帅哥1","帅哥2","帅哥3"];
var array2 = ["美女1","美女2","美女3"];

$(function(){
	var $yuanGong = $("#yuanGong").val();
	var $yuanGong2 = $yuanGong;
	$("#yuanGong").click(dakai);
	$("#select1").click(function(event){
		$(this).parent().siblings().children("select").each(function(){
			$(this).hide()
		});
		var $val = $(event.target).val();
		//alert($val);
		var array;
		var $select;
		if($val=="rj"){
			$select = $("#select2");
			array = array1;
		}else{
			$select = $("#select3");
			array = array2;
		}
		$select.show();
		if($select.children("option").length==0){
			for(var i=0;i<array.length;i++){
				var html = "<option value="+array[i]+">"+array[i]+"</option>";
				$select.append(html);
			}
		}	

	});

	$("#select2").click(f2);
	$("#select3").click(f2);
});

function f1(){
	var html = "";
	$.each($(".hightLight"),function(i,o){
		html += $(this).text();
		//alert($(".hightLight").length);
		//alert(i);
		if(i!=$(".hightLight").length-1){
			html += ",";
		}
		$("#yuanGong").val(html);
		//alert(html);
	});
	if(html=="")
		$("#yuanGong").val("");
	return html;
}

function f2(){
	var $option = $('option:selected',this);
	var $text = $option.text();
	if($option.hasClass("hightLight")){
		$option.removeClass("hightLight");
		var html = f1();
		$yuanGong2 = html;

	}else{
		$option.addClass("hightLight");
		var html = f1();
		$yuanGong2 = html;
	}
}
</script>
</head>
<body style="width:800px;height:1000px">
<!--把下面代码加到<body>与</body>之间-->
<input type="text" id="yuanGong"  size="50">
<div id="light" class="white_content">
<table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0">
<tr>
<td width="150" height="200" align="center" valign="middle">
部门
<select id="select1" size="12" name="D1"  multiple="multiple" style="width:140px">
<option value="rj">帅哥部</option>
<option value="xs">美女部</option>
</select>
</td>
<td width="150" height="200" align="center" valign="middle">
该部门员工
<select id="select2" size="12" name="D2" id="D2"  multiple="multiple" style="width:140px;">

</select>
<select id="select3" size="12" name="D2" id="D2"  multiple="multiple" style="width:140px;display:none">

</select>
</td>
</tr>
</table>
<input type="button" name="button" onclick="guanbi()" value="确定" />
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>