人员联动代码选择无效

智睿 · 发表于 2022-4-1 13:37:09

<!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" οnclick="showDiv(this)">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>IT部门
</button>
<button type="button" class="btn btn-default" form="peopleDivRS" οnclick="showDiv(this)">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>人事部门
</button>
<button type="button" class="btn btn-default" form="peopleDivWX" οnclick="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" οnclick="selectMamber(this)"style="width:10%;">it张三</a>
<a href="javascript:void(0);" class="list-group-item" id="2" οnclick="selectMamber(this)"style="width:10%;">it李四</a>
<a href="javascript:void(0);" class="list-group-item" id="3" οnclick="selectMamber(this)"style="width:10%;">it王五</a>
<a href="javascript:void(0);" class="list-group-item" id="4" οnclick="selectMamber(this)"style="width:10%;">it赵六</a>
<a href="javascript:void(0);" class="list-group-item" id="5"οnclick="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" οnclick="selectMamber(this)"style="width:10%;">人事张三</a>
<a href="javascript:void(0);" class="list-group-item" id="2" οnclick="selectMamber(this)"style="width:10%;">人事李四</a>
<a href="javascript:void(0);" class="list-group-item" id="3" οnclick="selectMamber(this)"style="width:10%;">人事王五</a>
<a href="javascript:void(0);" class="list-group-item" id="4" οnclick="selectMamber(this)"style="width:10%;">人事赵六</a>
<a href="javascript:void(0);" class="list-group-item" id="5"οnclick="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" οnclick="selectMamber(this)"style="width:10%;" >维修张三</a>
<a href="javascript:void(0);" class="list-group-item" id="2" οnclick="selectMamber(this)"style="width:10%;">维修李四</a>
<a href="javascript:void(0);" class="list-group-item" id="3" οnclick="selectMamber(this)"style="width:10%;">维修王五</a>
<a href="javascript:void(0);" class="list-group-item" id="4" οnclick="selectMamber(this)"style="width:10%;">维修赵六</a>
<a href="javascript:void(0);" class="list-group-item" id="5"οnclick="selectMamber(this)"style="width:10%;">维修李七</a>
</div>
</div>
<input type="text" name="user" id="userName" style="width: 90%;" />
</body>
</html>

复制代码

xuanxiao · 发表于 2022-4-1 23:09:45

范例.rar (423.67 KB, 下载次数: 1, 售价: 20 个ASP币)

处理好了，你这个代码有些小问题

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[问与答] 人员联动代码选择无效

在线客服

官方Q群 天天ASP家园网友互动群 群1: 697497501(新手学习互助群) 群2: 47598123(进阶应用群)

天天ASP家园网友互动群

[问与答] 人员联动代码选择无效

在线客服

官方Q群

天天ASP家园网友互动群

群1: 697497501(新手学习互助群)

群2: 47598123(进阶应用群)