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程序设计有所帮助。

Javascript 相关文章推荐
javascript 时间比较实现代码
Oct 28 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
Feb 09 Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
elementui实现预览图片组件二次封装
Dec 29 Javascript
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
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
自己动手做一个SQL解释器
2006/10/09 PHP
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
Python魔术方法详解
2015/02/14 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python 调用Java实例详解
2017/06/02 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
python excel转换csv代码实例
2019/08/26 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python 实现矩阵按对角线打印
2019/11/29 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
5.1手机促销活动
2014/01/17 职场文书
医生进修自我鉴定
2014/01/19 职场文书
临床专业自荐信
2014/06/22 职场文书
意向书范本
2014/07/29 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
工程承包协议书范本
2014/09/29 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
教师个人自我评价
2015/03/04 职场文书
警告通知
2015/04/25 职场文书
小学安全工作总结2015
2015/05/18 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
关于运动会的宣传稿
2015/07/23 职场文书