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 相关文章推荐
node.js中的console.error方法使用说明
Dec 10 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 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中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
PHP编写RESTful接口
2016/02/23 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php json转换相关知识(小结)
2018/12/21 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue debug 二种方法
2018/09/16 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
《三顾茅庐》教学反思
2014/04/10 职场文书
化妆品活动策划方案
2014/05/23 职场文书
React如何创建组件
2021/06/27 Javascript
浅谈Python魔法方法
2021/06/28 Java/Android
MySQL空间数据存储及函数
2021/09/25 MySQL