标签：
<!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="width: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>
标签：
原文地址：http://www.cnblogs.com/hupan508/p/5391698.html
