版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lanjian056/article/details/52711299
这些天我没什么事，一直都在聊天！趁着有空，我就整理以前做过的东西，顺便复习一下知识。无意中发现了这段代码，用jquery实现的仿QQ邮箱添加收件人形式的一个例子。只是一个例子，如果大家有需要，可以根据自己的需求修改一下。写的比较简陋，望大家见谅！
<!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=gbk" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<title></title>
<style>
*{font-size:12px}
.out1,in1{border:1px inset #ccc;height:20px;overflow-y:hidden;line-height:20px;width:500px}
#input1{border:0px;clear:none}
img {border-width: 0px 0px 0px 0px} <!--就是这行 代码起作用-->
</style>
<script language="javascript" defer>
$(document).ready(function() {
$("#code").val('');
});
function selected(name,code) {
var ids = $("#code").val();
if(ids.indexOf(code) == -1){ //没有找到匹配的id
$("#in1").append("<div style='width:auto;float:left;' id="+code+">"+name+" <a href=# onclick=javascript:deleteCode("+code+");><img src='cal.png'/></a>;</div>");
$("#"+code).hover(function(){
$(this).css("background","yellow");},function(){
$(this).css("background","white");
});
//添加隐藏域的值
ids += code + ",";
$("#code").val(ids);
}
}
function deleteCode(code){
alert(code);
var ids = $("#code").val();
$("#code").val(ids.replace(code+",",""));
$("#"+code).remove();
}
</script>
</head>
<body>
<table>
<tr>
<td width="10%" aglin="right">
收件人：
</td>
<td>
<div class="out1" id="out1" exp="">
<div class="in1" id="in1" exp="" onmousemove="">
</div>
</div>
<input type="text" id="code" name="code"/>
</td>
<td>
<div class="list" exp="">
<ul>
<li><a href="#" onclick="javascript:selected('张山','1001');">张山</a></li>
<li><a href="#" onclick="javascript:selected('李斯','1002');">李斯</a></li>
<li><a href="#" onclick="javascript:selected('王武','1003');">王武</a></li>
<li><a href="#" onclick="javascript:selected('赵溜','1004');">赵溜</a></li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
ps：我把整个需要用到的东西都上传了！需要看的童鞋，自己下载吧！