<!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; 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 { 100px; padding-left: 15px; } .select_director ul li span.w_2 { 200px; padding-left: 10px; } .select_director p.search_teacher input.w_1 { 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; 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; 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 { 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> <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" id="tag"></div> <ul class="clearfix"> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="1">胡志强<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="2">胡志坚<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="3">丰红宾<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="4">益达<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="5">胡孝贤<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="6">胡一诺<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="7">丰莉琳<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="8">胡俊<i class="sclose"></i></span> </li> <li name="copyhtml"> <em class="right_icon"></em> <span class="tag_class" data-id="9">郑燕<i class="sclose"></i></span> </li> <li name="copyhtml"> <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"); //var copyhtml = $("[name='copyhtml']") oli.click(function() { var dateId = $("[data-id=" + $(this).find("span").attr("data-id") + "]").length; //data-id的长度 if (dateId < 2) { //假如data-id的长度的长度小于2 就是只有1个的情况下 $(this).toggleClass("on"); $("#tag").append($(this).find("span").clone()); var tagspan = $("#tag span"); tagspan.click(function() { $(this).remove(); $("[data-id=" + $(this).attr("data-id") + "]").parent('li').removeClass('on'); }) } else if (dateId > 1) { //假如data-id的长度的长度小于1 就是只有3个的情况下 $(this).toggleClass("on"); $("[data-id=" + $(this).find("span").attr("data-id") + "]")[0].remove(); } }); var btnOk = $("#determineTeacher"); //点击确定,赋值 btnOk.click(function() { layer.close(pageii); var tdata = [] //定义数组 $("#tag span").each(function() { //循环出所有text var etext = $(this).text(); tdata.push(etext); //在数组的最后面加上text() }) $("#selectDirector").attr("value", tdata.join(',')); //用逗号分开，分隔符来分隔数组中的元素： }); }); //$(".tag").html($(".tag").html()+$(this).text()+","); </script> </body> </html>