实现页面三级联动以及弹出隐藏框

最新推荐文章于 2024-07-12 11:25:43 发布
最新推荐文章于 2024-07-12 11:25:43 发布
阅读量4.7k 收藏 3
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012453843/article/details/51965641
版权

首先让我们看下页面效果，其中的从事专业是三级联动，并且刚开始的时候只显示第一个下拉框，当选择某个专业后再显示选择第二个、第三个下拉框，这种效果用纯js来实现。感兴趣专业中那几个类似于超链接的学科（内科、外科学、妇产科学、儿科学）有个效果就是当点击汉字或者复选框的时候会弹出下一级<div>如下图所示，这种效果也是用纯js实现。


接下来，我就把页面代码粘贴过来，以备以后查询、学习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="z" uri="controls"%>
<html>
<head>
<d:include file="../user_include.zhtml" />
<title>工作信息</title>
<style>
 .dataTable{margin-top:15px;}
 .dataTable{border-collapse:collapse;border:1px solid #C3CAD0;}
 .dataTable tr td{border:1px solid #C3CAD0;}
 .dataTable .dataTableHead td{color:blue;}
 .dataTable .dataTableHead{background:#BDE0EE;}
 #uid_div11 img{width:84px;}
 #uid_td21 input{margin-right:5px;}
 .thirdUnion{height:26px;margin-right: 5px;}
 .checkboxstyle{font-size:12px;}
 .thirdstyle{color:blue;text-decoration:underline;}
 </style>

<script type="text/javascript">
$(document).ready(function(){
 $("#online_qq_layer").hover(function(){
  if(!$('#onlineService').is(":animated")){
     $('#onlineService').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#onlineService').show(); });$('#floatShow').attr('style','display:none');$('#floatHide').attr('style','display:block');
  return false;
  }
   },function(){
  if(!$('#onlineService').is(":animated")){
  $('#onlineService').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#onlineService').hide(); });$('#floatShow').attr('style','display:block');$('#floatHide').attr('style','display:none');
  }
  }); 
 });
</script>
<style>
#header #headercontent .netlink a{margin:0;}
#uid_div11 img{width:auto;}
.hyzxmain2{width:740px;}
#ckbTD label{
 display:inline-block;
 font-size: 12px;
 line-height: 28px;
}
 .parentOne { width: 100%; margin-left: 30px;position: relative; }
 .parentTwo{width:33%;display: inline-block;}
 .thirdDiv{
 position: absolute;
 background:white;
 border:1px solid black;
 display:none;
 }
 
</style>
</head>
<body>
<div id="online_qq_layer">
 <div id="online_qq_tab">
  <div class="online_icon">
   <a title id="floatShow" style="display: block;" href="javascript:void(0);">&nbsp;</a>
   <a title id="floatHide" style="display: none;" href="javascript:void(0);">&nbsp;</a>
  </div>
 </div> 
 <d:include file="../newright.zhtml" />
</div>
<d:include file="../newhead.zhtml" />
<!--container 开始-->
<div class="vipMain clearself">
 <div class="position">您的位置：<a href="${contextPath}${$Page.Index}" class="postion">会员中心</a> &gt; 工作信息</div>
 <div class="vipLeft fl">
     <d:include file="../newmenu.zhtml" />  
 </div>
 <div class="vipRight fr">
  <h2 class="defult_title">工作信息</h2>
  <div class="formBoxs">
            <div class="lib_Contentbox">
             <div id="con_one_3" >               
                <form id="form1">
     <table style="width:719px;" border="0" cellspacing="0" cellpadding="0"
      class="jbxxtable">
      <tr>
       <td width="139" align="right">职业：&nbsp;</td>
       <td width="580" align="left">
       <d:code code="Occupation" varCode="bean" varList="codelist">
         <select name="MetaValue_Occupation" id="MetaValue_Occupation" style="height:28px;margin-top:1px;" class="hyzxbox3">
         <option value="">请选择</option>
          <z:foreach data="${codelist}">
           <option value="${value.CodeValue}">${value.CodeName}</option>
          </z:foreach>
         </select>
           </d:code></td>
      </tr>
      <tr>
       <td align="right">工作医院：&nbsp;</td>
       <td align="left"><label for="textfield6"></label> <input
        type="text" name="MetaValue_WorkHospital" id="WorkHospital" class="hyzxbox1"
        value="" /></td>
      </tr>
      <tr>
       <td align="right">其他单位：&nbsp;</td>
       <td align="left"><label for="textfield6"></label> <input
        type="text" name="MetaValue_OtherBranch" id="OtherBranch" class="hyzxbox1"
        value="" /></td>
      </tr>
      <tr>
         <td></td>
         <td align="left"><span class="tishimsg2">[正确选择从事专业和感兴趣专业，将会让您享受更好的个性化服务，请您根据工作需要选择]</span></td>
      </tr>
      <tr>
       <td style="line-height: 26px;"  align="right">从事专业：&nbsp;<br>
         <span class="tishimsg">（建议填写)&nbsp;&nbsp;</span>
       </td>
       <td width="530" align="left">
       <d:code code="JobMajor" varCode="bean" varList="codelist">
       <script>
        var jobMajorData=${(toJSON(codelist))};
        var kvData={};
        var rootData=[];
        function getParentItem(key,item){
         if(key.lastIndexOf('.')>0){
          return kvData[key.substring(0,key.lastIndexOf('.'))];
         }
         return null;
        }
        for(var i in jobMajorData){
         var item=jobMajorData[i];
         var key=item.CodeValue;
         var text=item.CodeName;
         if(key&&text){
          kvData[key]={Key:key,Text:text,Children:[],Parent:null};
         }
        }
        for(var key in kvData){
         var item=kvData[key];
         var parent=getParentItem(key);
         if(!parent){
          if(item.Key&&item.Text){
           rootData.push(item);
          }
         }else{
          parent.Children.push(item);
          item.Parent=parent;
         }
        }
        
        function selectMajor(el){
         var level=$(el).attr("level");
         var key=el.value;
         var item=kvData[key];
         var children=item.Children;         
         $("select[level="+(parseInt(level)+1)+"]").remove();
         $("select[level="+(parseInt(level)+2)+"]").remove();
         if(children.length>0){
          var select=document.createElement("select");
          select.name=""; 
          level=parseInt(level)+1;
          $(select).attr("level",level);
          $(select).attr("class",'thirdUnion');
          var firstOption=document.createElement("option");
          firstOption.value='';
          if(level==1){
           firstOption.text='请选择二级专业';
          }else if(level==2){
           firstOption.text='请选择三级专业';
          }
          select.appendChild(firstOption);
          for(var i=0;i<children.length;i++){
           var option=document.createElement("option");
           option.value=children[i].Key;
           option.text=children[i].Text;
           select.appendChild(option);
          }
          $(select).bind("change",function(el,value,level){
           return function(){            
            selectMajor(el,level)
           }
          }(select,select.level));          
          $(el).after(select);
         }
        }
        document.write('<select name="MetaValue_Major" id="MetaValue_Major" class="thirdUnion" οnchange="selectMajor(this)" level="0">');
        document.write('<option value="">请选择一级专业</option>');
        for(var i=0;i<rootData.length;i++){
         document.write('<option value="'+rootData[i].Key+'">'+rootData[i].Text+'</option>')
        }
        document.write("</select>")
        
       </script> 
           </d:code>
      </td>
      </tr>
      <tr>       
       <td style="line-height: 26px;" valign="top" align="right">感兴趣专业：&nbsp;<br>
         <span class="tishimsg">（建议填写)&nbsp;&nbsp;</span>
       </td>
       <td align="left" id="ckbTD">
        <script>
        function selectChild(el){
         $(el).parent().parent().next().find("input[type=checkbox]").each(function(){
          this.checked=el.checked;
         });
        }
        function showOrSelect(el,value){
         el=$(el).prev()[0];
         var thirdDiv=document.getElementById("thirdDiv"+value);
         $(".thirdDiv[id!=thirdDiv"+value+"]").hide();
         $("#thirdDiv"+value).toggle("fast");
        }
        function twoClick(el){
         $(el).next().next().find("input[type=checkbox]").each(function(){
          this.checked=el.checked;
         });
        }
        for(var i=0;i<rootData.length;i++){
         var item=rootData[i];         
         var children=item.Children;
         document.write('<div><label><input name="MetaValue_InterestMajor" type="checkbox" class="checkboxstyle" ');
         if(children&&children.length>0){
          document.write('οnclick="selectChild(this)"');
         }
         document.write('value="'+item.Key+'">'+item.Text+'</label>')
         document.write("</div>")
         if(children&&children.length>0){       
          document.write('<div class="parentOne">');           
          for(var j=0;j<children.length;j++){
           document.write('<div class="parentTwo">'); 
           var child=children[j];
           var thirdArray=child.Children;           
           if(thirdArray.length>0){
            document.write('<input name="MetaValue_InterestMajor" type="checkbox" οnclick="twoClick(this)" value="'+child.Key+'"'); 
            document.write(' /><label class="thirdstyle" οnclick="showOrSelect(this,'+(j+1)+')">'+child.Text+'</label>');
            document.write('<div id="thirdDiv'+(j+1)+'" class="thirdDiv" style="width:165px;height:'+(thirdArray.length)*28+'px">');
            for(var k=0;k<thirdArray.length;k++){
             document.write('<label><input name="MetaValue_InterestMajor" type="checkbox" value="'+thirdArray[k].Key+'"/>'+thirdArray[k].Text+'</lable>');
             if(k<thirdArray.length-1){
              document.write('<br>');
             }             
            }
            document.write('</div>');
           }else{
            document.write('<label><input name="MetaValue_InterestMajor" type="checkbox" value="'+child.Key+'"'); 
            document.write(' />'+child.Text+'</label>');
           }
           document.write('</div>');
          }
          document.write('</div>');           
         }
        }
        </script>        
       </td>
      </tr>
      <tr>
       <td align="left">&nbsp;</td>
       <td align="left">
       <div class="tijiaobut">
          <input type="image" src="${$Theme.StaticPath}images/memberimg/hyzxlefttablebut2.gif" width="84" οnclick="dosave();return false;" height="31">
          <input type="image" src="${$Theme.StaticPath}images/memberimg/hyzxlefttablebut1.gif" width="84" οnclick="document.forms['form1'].reset()" height="31"> 
       </div></td>
      </tr>
     </table>
    </form>
              </div>
            </div>
  </div>
 </div>
</div>
<!--container end-->
<div class="clear"></div>
<div id="footer">
<d:include file="../footer.zhtml" />
</div>

<d:metaData var="MeteData" code="User" pk="${AccessUnit.ID}">
 <script>
 function dosave(){
  debugger
  Server.sendRequest("saveExtend",Form.getData("form1"),function(response){
   debugger
   if(response.Status==1){
    alert("成功")
   }
  });
 }
 
  $(function() {
   init();
  })
  function init() {
   var jsonData = ${(toJSON(MeteData))};
   for ( var key in jsonData) {
    var elements = document.getElementsByName(key);
    if (!(elements && elements.length > 0)) {
     continue;
    }
    var len = elements.length;
    for (var i = 0; i < len; i++) {
     var element = elements[i];
     var value = jsonData[key];
     if (element.type == "checkbox" || element.type == "radio") {
      if (typeof (value) == "string") {
       var values = value.split(',');
       var size = values.length;
       for (var j = 0; j < size; j++) {
        if (element.value == values[j]) {
         element.checked = "checked";
        }
       }
      } else if (element.value == value) {
       element.checked = "checked";
      }
     } else if (element.type == "text") {
      element.value = value;
     }else {
      element.value = value;
     }
    }
   }
  }
 </script>
</d:metaData>
</body>
</html>

在京奋斗者
关注
专栏目录
vue+mint-ui 移动端框架Picker 组件实现 省市区 三级联动
巫小婆的博客园~
07-16 1314
移动端实现三级联动 mint-ui api传送门 官网链接 npm 安装 npm i mint-ui -S 引入 Mint UI 分两种形式： 一是完全引入，具体实现方式 在 main.js 写入以下代码： 重要：样式文件需要单独引入 import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' Vue.use(MintUI) new Vue
jquery弹窗三级联动
10-25
Jquery无刷新弹窗三级联动
三级联动弹窗
麋鹿的鹿
02-06 168
【代码】三级联动弹窗。
三级联动 省--＞ 市--＞ 区
最新发布
weixin_68320295的博客
07-12 156
总结：看到{}这个括号是Object对象 只能用for in循环 看到【】是数组 用for i 、for of、forEach循环，在Option中插入新的数据。用add(new Option())方法，清除上次选择的影响，用while循环，里边写入remove方法。
简单的三级联动页面
qq_44003931的博客
03-30 265
自制三级联动下拉框
weixin_44550157的博客
07-28 469
开发工具与关键技术：VS/MVC 作者：何桂朋 撰写时间：2019年7月26日 首先解析一下三级联动下拉框，三级联动下拉框将一条消息展开后的多条信息，再选中其中一条信息，有会出现与这条消息所包含的信息。就是把三个有彼此关系的三个下拉框的动态连接。以学校为例，学校有18级，19级，假如18级里有1班、2班、3班，19级有4班、5班、6班。选中学校时会出现18级和19级，再选中18级时，就会出现1班、...
自定义弹窗（三） 弹窗选择三级联动城市
03-31
Android 自定义弹窗 城市三级联动 详情请关注 http://blog.csdn.net/gdecking/article/details/22654985
js日期三级联动-滑动选择.rar
07-16
可能使用了JavaScript来动态生成和更新日期选择框的内容，以及控制弹出层的显示和隐藏。 综上所述，"js日期三级联动-滑动选择.rar"是一个综合运用JavaScript、jQuery和CSS技术的前端组件，它实现了日期选择的三级...
省市区县三级联动
01-15
在IT行业中，"省市区县三级联动"是一个常见的前端开发需求，主要应用于地理信息选择、地址填写等场景。它提供了一种便捷的方式，让用户能够依次选择省份、城市、区县，形成一个完整的地理位置。这种联动效果是通过...
jQuery遮罩弹出地区二级和三级联动代码.zip
09-21
《jQuery遮罩弹出地区二级和三级联动代码详解》 在网页开发中，常常需要实现一种功能：当用户点击某个按钮或链接时，一个遮罩层弹出，展示选择区域的功能，例如省份、城市的选择。这种功能在电商网站、表单填写等...
jQuery省市县三级联动
07-13
【jQuery省市县三级联动】是一种常见的前端交互设计，主要用于实现用户在选择省份时，自动更新市和县的下拉选项，以提供流畅的地理选择体验。这种技术在各种需要收集用户详细地址信息的Web应用中非常常见，如电商...
jQuery输入框三级联动菜单选择
ICode联盟
10-26 514
jQuery输入框三级联动菜单选择效果，点击input输入框分类菜单选择器，点击弹出下拉菜单，三级联动选择器，适用于多分类菜单选择代码。
三级联动选项卡
shuffle_boy的博客
04-08 598
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级联动</title> </head> <body> <form action=""> <select name="" id="xu...
三级联动
u012746918的博客
05-22 312
js代码 Page({ /** * 页面的初始数据 */ data: { objectMultiShow: [], objectMultiArray: [], multiArray: [], multiIndex: [], checkeIndex: [] }, /** * 生命周期函数--监听页面加载 * obj...
layui 下拉框三级联动
linanqi_java的博客
11-23 5620
项目需要用layui的三级联动，自己瞎整了一下，做个记录 1.表结构设计 CREATE TABLE `dt_area` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '区域主键', `area_name` varchar(16) DEFAULT NULL COMMENT '区域名称', `area_code` varchar(128)...
jQuery 前端复选框 全选 反选 下拉菜单联动
weixin_30388677的博客
07-05 290
jQuery 页面中复选框全选、反选、下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
三级下拉选择框——三级联动
寨板p45黑苹果10.12.6
05-18 507
ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。 as前面为真实值，后面为显示值。 ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。 ng-options="item.id as item.name for item in selectItemCat1List" item in selectIte..
下拉框三级联动（加自定义按钮）
weixin_43398732的博客
07-13 379
数据类型：数组 var topClass = ['','1','2','3'] var firstClass = [ [''], ['','1.1','1.2','1.3'], ['','2.1','2.2','2.3','2.4'], ['','3.1','3.2'] ] var secondClass = [ [['']], [['','1.1.1','1.1.2','1.1.3'],['','1.2.1','1.2.2','1.2.3','1.2.4'],['']]
实现下拉框三级联动效果
星
01-06 2426
数据库设计 html代码 <div class="form-group"> <label class="col-sm-2 control-label">钢种组</label> <div class="layui-input-inline col-sm-1" style="display: inline-block; padding: 0"> <select id="gangzhongzu" th:na
JSP页面实现Ext下拉框三级联动功能详解
在JSP页面中实现下拉框的三级联动功能是利用Ext库进行前端开发时常见的一种交互设计。本示例展示了如何通过Ext JS框架构建一个具有层级关系的下拉列表，让用户可以根据首级选择触发二级、三级选项的动态加载。以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值