三个框里的同一个人不能分别出现在三个框里,如果后面的框选的人,前面出现过,则删除该人,以最后一步选择为主
Html:
<div class="EditMeetingRecord none editBox" id="EditMeetingRecord">
<div class="title_add clearfix">
<label>会议类别:</label><select class="form-control">
<option value="">支部党员大会</option>
<option value="">支部委员会</option>
<option value="">党小组会议</option>
<option value="">党课</option>
<option value="">组织生活会</option>
<option value="">民主评议党员</option>
<option value="">党员活动记录</option>
</select>
</div>
<div class="tableWrap">
<table>
<tr><th class="w1">会议名称</th><td class="w2"><input class="form-control input-lg" type="text" placeholder="" disabled></td><th class="w3">时间</th><td class="w4"><input class="form-control input-lg" type="text" placeholder="" onfocus="WdatePicker({maxDate:'%y-%M-%d'})" disabled></td></tr>
<tr><th class="w1">地点</th><td class="w2"><input class="form-control input-lg" type="text" placeholder="" disabled></td><th class="w3">组织者</th><td class="w4"><input class="form-control input-lg" type="text" placeholder="" disabled></td></tr>
<tr><th class="w1">主持人</th><td class="w2"><input class="form-control input-lg" type="text" placeholder="" disabled></td><th class="w3">记录人</th><td class="w4"><input class="form-control input-lg" type="text" placeholder="" disabled></td></tr>
<tr><th class="w1">出席人员</th><td colspan="3"><input class="form-control input-lg" type="text" placeholder="" id="Attendees" disabled onclick="memberListEvent('Attendees')"></td></tr>
<tr><th class="w1">请假人员</th><td colspan="3"><input class="form-control input-lg" type="text" placeholder="" id="DayOff" disabled onclick="memberListEvent('DayOff')"></td></tr>
<tr><th class="w1">缺席人员</th><td colspan="3"><input class="form-control input-lg" type="text" placeholder="" id="Absent" disabled onclick="memberListEvent('Absent')"></td></tr>
<input type="hidden" value="" id="AttendeesHiddenValue" />
<input type="hidden" value="" id="DayOffHiddenValue" />
<input type="hidden" value="" id="AbsentHiddenValue" />
<tr><th class="w1">会议主题</th><td colspan="3"><input class="form-control input-lg" type="text" placeholder="" disabled></td></tr>
<tr><th class="w1">决议情况</th><td colspan="3"><textarea class="form-control" rows="3" placeholder="" disabled></textarea></td></tr>
</table>
</div>
<div class="btnWrap">
<a href="javascript:box_edit();" class="btn btn-primary">编辑</a>
<a href="javascript:box_save();" class="btn btn-success">保存</a>
<a href="javascript:;" class="btn btn-default closeBtn">关闭</a>
</div>
</div>
<div class="memberListBox none" id="memberListBox">
<div class="con">
<a href="javascript:;" class="btn btn-default" id="member001">李林001</a>
<a href="javascript:;" class="btn btn-default" id="member002">王欢西002</a>
<a href="javascript:;" class="btn btn-default" id="member003">王鑫003</a>
<a href="javascript:;" class="btn btn-default" id="member004">黄丽丽004</a>
<a href="javascript:;" class="btn btn-default" id="member005">杨丽萍005</a>
<a href="javascript:;" class="btn btn-default" id="member006">王欢西006</a>
<a href="javascript:;" class="btn btn-default" id="member007">王鑫007</a>
<a href="javascript:;" class="btn btn-default" id="member008">黄丽丽008</a>
<a href="javascript:;" class="btn btn-default" id="member009">李林009</a>
<a href="javascript:;" class="btn btn-default" id="member010">王欢西010</a>
<a href="javascript:;" class="btn btn-default" id="member011">王鑫011</a>
<a href="javascript:;" class="btn btn-default" id="member012">黄丽丽012</a>
</div>
<div class="btnWrap">
<a href="javascript:;" class="btn btn-success saveBtn">保存</a>
<a href="javascript:;" class="btn btn-default closeBtn">关闭</a>
</div>
</div>
Js:
//选择人员事件
function memberListEvent(target) {
var $target = $("#" + target);
var $hiddenValue = $("#" + target + "HiddenValue");
var $con = $('#memberListBox .con');
var $a = $con.find("a");
//弹出人员列表
layer.open({
type: 1,
shade: 0.3,
shadeClose: true,
fix: false,
title: "人员列表",
area: ['600px', '600px'],
content: $('#memberListBox'),
close: function (index) {
layer.close(index);
}
});
//初始化
$('#memberListBox .con a').removeClass("btn-primary");
var array = $target.val().split(",");
var array2 = $hiddenValue.val().split(",");
if (array[0] == "") {
array.splice(0, 1);
array2.splice(0, 1);
}
var len = array2.length;
var len2 = $a.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len2; j++) {
if (array2[i] == $a.eq(j).attr("id")) {
$a.eq(j).addClass("btn-primary");
}
}
}
//选择人员
$("body").off("click").on("click", '#memberListBox .con a', function () {
var $this = $(this);
var id = $(this).attr("id");
var name = $this.text();
$this.toggleClass("btn-primary");
if ($this.hasClass("btn-primary")) {
array.push(name);
array2.push(id);
} else {
array.splice($.inArray(name, array), 1);
array2.splice($.inArray(id, array), 1);
}
$target.val(array);
$hiddenValue.val(array2);
//如果另两个框里有重复的人,删除该人
function DeleteDuplicateNames(target) {
if ($("#" + target).val() != "") {
var targetAry = $("#" + target).val().split(",");
var targetAry2 = $("#" + target + "HiddenValue").val().split(",");
var len = targetAry.length;
for (var i = 0; i < len; i++) {
if (id == targetAry2[i]) {
targetAry.splice($.inArray(name, targetAry), 1);
targetAry2.splice($.inArray(id, targetAry2), 1);
}
}
$("#" + target).val(targetAry);
$("#" + target + "HiddenValue").val(targetAry2);
}
}
if (target == "Attendees") {//出席
DeleteDuplicateNames("DayOff");
DeleteDuplicateNames("Absent");
} else if (target == "DayOff") {//请假
DeleteDuplicateNames("Attendees");
DeleteDuplicateNames("Absent");
} else {//缺席
DeleteDuplicateNames("Attendees");
DeleteDuplicateNames("DayOff");
}
});
//保存关闭弹出框
$("#memberListBox .saveBtn,#memberListBox .closeBtn").click(function () {
var $this = $(this);
var i = $this.parent().parent().parent().parent().attr('times');
layer.close(i);
});
}