2010.04.26———弹出层选择收件人的效果
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" 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>