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

- Author -

EthanQ

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

Javascript 相关文章推荐

jquery实现Ctrl+Enter提交表单的方法

Jul 21 Javascript

iframe跨域通信封装详解

Aug 11 Javascript

基于jQuery实现的向下滑动二级菜单效果代码

Aug 31 Javascript

JS实现图片高亮展示效果实例

Nov 24 Javascript

jQuery实现立体式数字滚动条增加效果

Dec 21 Javascript

详解js常用分割取字符串的方法

May 15 Javascript

webpack + vue 打包生成公共配置文件（域名）方便动态修改

Aug 29 Javascript

layui table 多行删除(id获取)的方法

Sep 12 Javascript

jQuery鼠标滑过横向时间轴样式(代码详解)

Nov 01 jQuery

Swiper实现导航栏滚动效果

Oct 16 Javascript

Javascript Symbol原理及使用方法解析

Oct 22 Javascript

Vue3中的Refs和Ref详情

Nov 11 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