改进版本已出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选</title>
<link rel="stylesheet" href="http://www.xybsyw.com/themes/center/css/admin_top_foot.css">
<link rel="stylesheet" href="http://www.xybsyw.com/themes/center/css/popup/popup.css">
<script src="http://www.xybsyw.com/jquery/jquery.min.js"></script>
<script src="http://www.xybsyw.com/jquery/plugs/layer/layer.min.js"></script>
<style>
/*审核状态弹窗*/
.select_director{background-color: #fff;display: block;}
.select_director p.search_teacher{display: block; padding: 15px 0 0 35px;}
.select_director ul {display: block; padding:0 30px 30px 30px;margin-top: 10px; }
.select_director ul li{display: block;/*border-top: #ddd 1px solid*/;line-height: 25px; padding: 3px 5px; cursor: pointer; position: relative; width: 140px; float: left; margin-right: 15px; }
.select_director ul li.ts_bg{background-color: #f4f4f4;}
.select_director ul li:hover,.select_director ul li.on{background-color: #e7f2ff;}
.select_director ul li span{display:inline-block; vertical-align: middle;*zoom:1;*display:inline;overflow: hidden;text-overflow: ellipsis; white-space:nowrap}
.select_director ul li span.w_1{width:100px;padding-left: 15px;}
.select_director ul li span.w_2{width:200px;padding-left: 10px;}
.select_director p.search_teacher input.w_1{width:150px;border: #95b8e7 1px solid;border-radius: 5px; padding:3px 5px;}
.select_director p.search_teacher input.btn_steacher{background:url("http://www.xybsyw.com/themes/center/images/index_search_btnbg.png") no-repeat scroll 0 0; border: 0 none;color: #fff;cursor: pointer;display: inline-block;height: 30px;padding-left: 32px;text-align: left;vertical-align: middle; width: 80px;margin-left:5px;}
.select_director p.search_teacher input.btn_steacher:active {padding-top: 2px;}
.select_director ul li em.right_icon{display: none;background: url(http://www.xybsyw.com/themes/center/images/right_icon.png) 0 0 no-repeat;width: 16px; height: 16px;position: absolute; right: 10px;; top: 10px; }
.select_director ul li.on em.right_icon{display: block;}
.tag{display: block; padding: 5px 30px 0 30px;}
.tag span.tag_class{border-radius: 5px;color: #fff; display: inline-block;*zoom:1;*display: inline-block; margin:5px 10px 5px 0; padding:0 5px; line-height: 25px; background-color: #f7941d; cursor: pointer;}
.tag span.tag_class i.sclose{width: 14px; height: 14px; background: url(http://www.xybsyw.com/themes/center/images/tag_close.png) 0px 0px no-repeat; cursor: pointer; display:inline-block ; *zoom:1 ; *display:inline; vertical-align: middle; margin-left: 5px;position: relative; top: -1px}
.tag span.tag_class i.sclose:hover{background-position: 0px -22px;}
</style>
</head>
<body style="height:1900px">
<input type="text" value="专业主任" id="selectDirector">
<!--选择专业主任-->
<div class="popup" id="selectDirectorBox" style="400px">
<h3>选择专业主任<a href="javascript:;" class="close"></a></h3>
<div class="select_director clearfix">
<p class="search_teacher">
<input type="text" placeholder="姓名" class="input_text w_1">
<input type="button" value="搜索" class="btn_steacher">
</p>
<div class="tag">
</div>
<ul class="clearfix">
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="1">胡志强<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="2">胡志坚<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="3">丰红宾<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="4">益达<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="5">胡孝贤<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="6">胡一诺<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="7">丰莉琳<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="8">胡俊<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="9">郑燕<i class="sclose"></i></span>
</li>
<li>
<em class="right_icon"></em>
<span class="tag_class" data-id="10">胡攀<i class="sclose"></i></span>
</li>
</ul>
</div>
<div class="w_foot">
<a href="javascript:;" id="determineTeacher" class="btn_save" title="确定">确定</a>
<a href="#" title="取消" class="btn_cancel close">取消</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var pageii = null;
//选择专业主任
$('#selectDirector').on('click', function () {
pageii = $.layer({
type: 1,
title: false,
bgcolor: false,
border: [0], //去掉默认边框
shade: [0.3, '#000'], //不显示遮罩
closeBtn: [0, false], //去掉默认关闭按钮
area: ['400px', 'auto'],
fix: false,
page: {
dom: '#selectDirectorBox'
}
});
//自设关闭
$('.close').on('click', function () {
layer.close(pageii);
});
});
//tag点击事件
var oli = $(".select_director ul li");
oli.click(function(){
$(this).toggleClass("on");
$(".tag").empty();
var olionspan =$(".select_director ul li.on span");
olionspan.each(function(){
//$(this).clone().appendTo($(".tag"));
$(".tag").append($(this).clone());
});
var tagspan = $(".tag span");
tagspan.click(function(){
$("[data-id="+$(this).attr("data-id")+"]")[1].click(); //第二个属性为data-id的值
});
var btnOk = $("#determineTeacher");
//点击确定,赋值
btnOk.click(function(){
layer.close(pageii);
var tdata=[]//定义数组
tagspan.each(function(){
var etext = $(this).text();
tdata.push(etext);//在数组的最后面加上text()
})
$("#selectDirector").attr("value",tdata.join(',')); //用逗号分开，分隔符来分隔数组中的元素：
});
});
});
//$(".tag").html($(".tag").html()+$(this).text()+",");
</script>
</body>
</html>