部门人员多选页面---
本人的页面写的很水，算是一个bootstrap的小白。今天闲来无事，写了一个有关于人员多选的页面，代码如有不足之处，还望大神指点。
代码如下，需要自己导入bootstrap
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var arry = new Array();//存在人员名字
var divIds = new Array();//存在divId
function selectMamber(obj){
var className=$(obj).attr("class");
var value=$(obj).html();
if(className=="list-group-item"){
//选中
$(obj).attr("class","list-group-item active");
arry.push(value);
$("#userName").attr("value",arry.join(" "));
}else if(className=="list-group-item active"){
//取消选中
$(obj).attr("class","list-group-item");
for(var i = 0;i<arry.length;i++){
if(arry[i]==value){
arry.splice(i,1);
}
}
$("#userName").attr("value",arry.join(" "));
}
}
function showDiv(obj){
debugger;
var divId = $(obj).attr("form");
divIds.push(divId);
for(var i=0;i<divIds.length;i++){
if(divIds[i]!=divId){
$("#"+divIds[i]).attr("style","display: none;");
}
}
$("#"+divId).removeAttr("style");
}
</script>
<style type="text/css">
div{
display: inline;
}
</style>
</head>
<body>
<div class="btn-group" role="group" >
<button type="button" class="btn btn-default" form="peopleDivIT" onclick="showDiv(this)">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>IT部门
</button>
<button type="button" class="btn btn-default" form="peopleDivRS" onclick="showDiv(this)">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>人事部门
</button>
<button type="button" class="btn btn-default" form="peopleDivWX" onclick="showDiv(this)">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>维修部门
</button>
</div>
<div id="peopleDivIT" style="display: none;">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item" id="1" onclick="selectMamber(this)"style="width:10%;">it张三</a>
<a href="javascript:void(0);" class="list-group-item" id="2" onclick="selectMamber(this)"style="width:10%;">it李四</a>
<a href="javascript:void(0);" class="list-group-item" id="3" onclick="selectMamber(this)"style="width:10%;">it王五</a>
<a href="javascript:void(0);" class="list-group-item" id="4" onclick="selectMamber(this)"style="width:10%;">it赵六</a>
<a href="javascript:void(0);" class="list-group-item" id="5"onclick="selectMamber(this)"style="width:10%;">it李七</a>
</div>
</div>
<div id="peopleDivRS" style="display: none;">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item" id="1" onclick="selectMamber(this)"style="width:10%;">人事张三</a>
<a href="javascript:void(0);" class="list-group-item" id="2" onclick="selectMamber(this)"style="width:10%;">人事李四</a>
<a href="javascript:void(0);" class="list-group-item" id="3" onclick="selectMamber(this)"style="width:10%;">人事王五</a>
<a href="javascript:void(0);" class="list-group-item" id="4" onclick="selectMamber(this)"style="width:10%;">人事赵六</a>
<a href="javascript:void(0);" class="list-group-item" id="5"onclick="selectMamber(this)"style="width:10%;">人事李七</a>
</div>
</div>
<div id="peopleDivWX" style="display: none;">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item" id="1" onclick="selectMamber(this)"style="width:10%;" >维修张三</a>
<a href="javascript:void(0);" class="list-group-item" id="2" onclick="selectMamber(this)"style="width:10%;">维修李四</a>
<a href="javascript:void(0);" class="list-group-item" id="3" onclick="selectMamber(this)"style="width:10%;">维修王五</a>
<a href="javascript:void(0);" class="list-group-item" id="4" onclick="selectMamber(this)"style="width:10%;">维修赵六</a>
<a href="javascript:void(0);" class="list-group-item" id="5"onclick="selectMamber(this)"style="width:10%;">维修李七</a>
</div>
</div>
<input type="text" name="user" id="userName" style="width: 90%;" />
</body>
</html>