首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现的checkbox级联选择下拉菜单效果示例

Posted in Javascript onDecember 26, 2016

本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考，具体如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script language="JavaScript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<!--table 一行一列：table 三行一列：table 一行一列：table 三行一列：table-->
 <table width="156">
  <tr>
   <td>
    <table width="152">
     <tr width="152">
     <td>
      <table width="152">
        <tr>
         <td>
         <table width="98%" align="center">
          <tr style="color:red;background:blue" onClick="show('1') ">
           <td><img src="./ui/images/yonghu.png"></td>
           <td>用户管理</td>
           <td><img src="./ui/images/zhankai.png"></td>
          </tr>
         </table>
         </td>
        </tr>
        <tr id="tr0_1" style="DISPLAY: none">
         <td>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/yonghuxinxi.png"></td>
            <td>用户信息</td>
          </tr>
          </table>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/juesequanxian.png"></td>
            <td>角色权限</td>
          </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
     <tr width="152">
     <td>
      <table width="152">
        <tr>
         <td>
         <table width="98%" align="center">
          <tr style="color:red;background:blue" onClick="show('2') ">
           <td><img src="./ui/images/kehu.png"></td>
           <td>客户管理</td>
           <td><img src="./ui/images/zhankai.png"></td>
          </tr>
          </table>
         </td>
        </tr>
        <tr id="tr0_2" style="DISPLAY: none">
         <td><!-- 一列两个table-->
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/kehuxinxi.png"></td>
            <td>客户信息</td>
          </tr>
          </table>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/lianxiren.png"></td>
            <td>联系人列表</td>
          </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
     <tr width="152">
     <td>
      <table width="152">
        <tr>
         <td>
         <table width="98%" align="center">
          <tr style="color:red;background:blue" onClick="show('3')">
           <td><img src="./ui/images/xitong.png"></td>
           <td>系统管理</td>
           <td><img src="./ui/images/zhankai.png"></td>
          </tr>
          </table>
         </td>
        </tr>
        <tr id="tr0_3" style="DISPLAY: none">
         <td>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/xitongrizhi.png"></td>
            <td>系统日志</td>
          </tr>
          </table>
          <table width="90%" align="center">
          <tr>
            <td><img src="./ui/images/shujuzidian.png"></td>
            <td>数据字典</td>
          </tr>
          </table>
         </td>
        </tr>
       </table>
      </td>
     </tr>
   </table>
  </td>
 </tr>
 </table>
</body>
<script language="JavaScript">
<!--js dom: 根据tr0_id, id的值，进行操作。得到tr的length，遍历，判断id值，根据传入的id值，拼装tr0_id,-->
<!--拿到对应的tr元素，设置 显示或隐藏 -->
function show(id){
 //使用循环遍历找到需要控制的所有隐藏的tr
 var $tr = $("tr[id^='tr0']");
// alert($tr.length);
 $tr.each(function(index,domEle){
  //查找当前onclick操作的tr
  //检查 每次循环遍历 操作要对应的tr，隐藏的，就三个，看看是哪一个
  //
  if(id==index+1){
   //如果当前的tr处于隐藏状态，就得显示
   if($(this).is(":hidden")){
     $(this).attr("style","DISPLAY: block");
   }
   //如果当前的tr处于显示状态，就得隐藏
   else{
    $(this).attr("style","DISPLAY: none");
   }
  }
  <!--把其他的打开的 隐藏 每次都会遍历-->
  else{
   //将不选择的tr都隐藏
   $(domEle).attr("style","DISPLAY: none");
  }
 })
}
</script>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现的checkbox级联选择下拉菜单效果示例

- Author -

EthanQ

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
javascript输出AscII码扩展集中的字符方法
Dec 26 #Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 #Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 #Javascript
jQuery实现动态添加tr到table的方法
Dec 26 #Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
js模糊查询实例分享
Dec 26 #Javascript
AngularJs篇：使用AngularJs打造一个简易权限系统的实现代码
Dec 26 #Javascript
DE1105(1) WR-800F(1) 胆机(1) YAESU(1) DE1103(2) DE1107(3) SONY600GR(1) 239军机(1) 根德5570(1) R9700(1)
You might like
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十五）
2014/06/30 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
一个简单的php路由类
2016/05/29 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
深入理解JavaScript系列（22）：S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
从零学Python之hello world
2014/05/21 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python学习——内置函数、数据结构、标准库的技巧（推荐）
2019/04/18 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Python实现队列的方法示例小结【数组，链表】
2020/02/22 Python
python代码实现猜拳小游戏
2020/11/30 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
思想政治教育专业个人求职信范文
2013/12/20 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
运动会口号8字
2014/06/07 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
招标授权委托书样本
2014/09/23 职场文书
党的群众路线教育实践活动个人对照检查材料（校长）
2014/11/05 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
感动中国何玥观后感
2015/06/02 职场文书
职场新人知识：如何制定一份合理的工作计划？
2019/09/11 职场文书