开启辅助访问
切换到宽版

天天ASP家园官方Q群

天天ASP家园网友互动群

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

群2: 47598123(进阶应用群)

天天ASP家园»论坛 › 技术交流 › 前端技术 › 人员联动代码选择无效
返回列表 发新帖
查看: 566|回复: 1

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

[复制链接]
智睿 发表于 2022-4-1 13:37:09 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap 101 Template</title>
  8.     <link href="css/bootstrap.min.css" rel="stylesheet">
  9.     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  10.     <script src="js/bootstrap.min.js"></script>
  11.     <script type="text/javascript">
  12.     var arry = new Array();//存在人员名字
  13.     var divIds = new Array();//存在divId
  14.             function selectMamber(obj){
  15.                     var className=$(obj).attr("class");
  16.                     var value=$(obj).html();
  17.                     if(className=="list-group-item"){
  18.                             //选中
  19.                             $(obj).attr("class","list-group-item active");
  20.                             arry.push(value);
  21.                             $("#userName").attr("value",arry.join("    "));
  22.                     }else if(className=="list-group-item active"){
  23.                             //取消选中
  24.                             $(obj).attr("class","list-group-item");
  25.                             for(var i = 0;i<arry.length;i++){
  26.                                     if(arry[i]==value){
  27.                                             arry.splice(i,1);
  28.                                     }
  29.                             }
  30.                             $("#userName").attr("value",arry.join("    "));
  31.                     }
  32.             }
  33.            
  34.             function showDiv(obj){
  35.                     debugger;
  36.                     var divId = $(obj).attr("form");
  37.                     divIds.push(divId);
  38.                     for(var i=0;i<divIds.length;i++){
  39.                             if(divIds[i]!=divId){
  40.                                     $("#"+divIds[i]).attr("style","display: none;");
  41.                             }
  42.                     }
  43.                     $("#"+divId).removeAttr("style");
  44.             }
  45.     </script>
  46.     <style type="text/css">
  47.              div{
  48.                      display: inline;
  49.              }
  50.     </style>
  51.   </head>
  52.   <body>
  53.                 <div class="btn-group" role="group" >
  54.                   <button type="button" class="btn btn-default" form="peopleDivIT" οnclick="showDiv(this)">
  55.                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>IT部门
  56.                   </button>
  57.                   <button type="button" class="btn btn-default" form="peopleDivRS" οnclick="showDiv(this)">
  58.                           <span class="glyphicon glyphicon-user" aria-hidden="true"></span>人事部门
  59.                   </button>
  60.                   <button type="button" class="btn btn-default" form="peopleDivWX" οnclick="showDiv(this)">
  61.                           <span class="glyphicon glyphicon-user" aria-hidden="true"></span>维修部门
  62.                   </button>
  63.                 </div>
  64.                 <div id="peopleDivIT" style="display: none;">
  65.                                 <div class="list-group">
  66.                                   <a href="javascript:void(0);" class="list-group-item" id="1" οnclick="selectMamber(this)"style="width:10%;">it张三</a>
  67.                                   <a href="javascript:void(0);" class="list-group-item" id="2" οnclick="selectMamber(this)"style="width:10%;">it李四</a>
  68.                                   <a href="javascript:void(0);" class="list-group-item" id="3" οnclick="selectMamber(this)"style="width:10%;">it王五</a>
  69.                                   <a href="javascript:void(0);" class="list-group-item" id="4" οnclick="selectMamber(this)"style="width:10%;">it赵六</a>
  70.                                   <a href="javascript:void(0);" class="list-group-item" id="5"οnclick="selectMamber(this)"style="width:10%;">it李七</a>
  71.                                 </div>
  72.                 </div>
  73.                 <div id="peopleDivRS" style="display: none;">
  74.                                 <div class="list-group">
  75.                                   <a href="javascript:void(0);" class="list-group-item" id="1" οnclick="selectMamber(this)"style="width:10%;">人事张三</a>
  76.                                   <a href="javascript:void(0);" class="list-group-item" id="2" οnclick="selectMamber(this)"style="width:10%;">人事李四</a>
  77.                                   <a href="javascript:void(0);" class="list-group-item" id="3" οnclick="selectMamber(this)"style="width:10%;">人事王五</a>
  78.                                   <a href="javascript:void(0);" class="list-group-item" id="4" οnclick="selectMamber(this)"style="width:10%;">人事赵六</a>
  79.                                   <a href="javascript:void(0);" class="list-group-item" id="5"οnclick="selectMamber(this)"style="width:10%;">人事李七</a>
  80.                                 </div>
  81.                 </div>
  82.                 <div id="peopleDivWX" style="display: none;">
  83.                                 <div class="list-group">
  84.                                   <a href="javascript:void(0);" class="list-group-item" id="1" οnclick="selectMamber(this)"style="width:10%;" >维修张三</a>
  85.                                   <a href="javascript:void(0);" class="list-group-item" id="2" οnclick="selectMamber(this)"style="width:10%;">维修李四</a>
  86.                                   <a href="javascript:void(0);" class="list-group-item" id="3" οnclick="selectMamber(this)"style="width:10%;">维修王五</a>
  87.                                   <a href="javascript:void(0);" class="list-group-item" id="4" οnclick="selectMamber(this)"style="width:10%;">维修赵六</a>
  88.                                   <a href="javascript:void(0);" class="list-group-item" id="5"οnclick="selectMamber(this)"style="width:10%;">维修李七</a>
  89.                                 </div>
  90.                 </div>
  91.                 <input type="text" name="user" id="userName" style="width: 90%;" />
  92.   </body>
  93. </html>       
复制代码
ASP币如何冲？请看这里
回复

使用道具 举报

xuanxiao 发表于 2022-4-1 23:09:45 | 显示全部楼层
2.png

1.png

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

处理好了，你这个代码有些小问题
ASP币如何冲？请看这里
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号