jQuery实现的checkbox级联选择下拉菜单效果示例
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考,具体如下:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title></title> <scriptlanguage="JavaScript"src="jquery-1.4.2.min.js"></script> </head> <body> <!--table一行一列:table三行一列:table一行一列:table三行一列:table--> <tablewidth="156"> <tr> <td> <tablewidth="152"> <trwidth="152"> <td> <tablewidth="152"> <tr> <td> <tablewidth="98%"align="center"> <trstyle="color:red;background:blue"onClick="show('1')"> <td><imgsrc="./ui/images/yonghu.png"></td> <td>用户管理</td> <td><imgsrc="./ui/images/zhankai.png"></td> </tr> </table> </td> </tr> <trid="tr0_1"style="DISPLAY:none"> <td> <tablewidth="90%"align="center"> <tr> <td><imgsrc="./ui/images/yonghuxinxi.png"></td> <td>用户信息</td> </tr> </table> <tablewidth="90%"align="center"> <tr> <td><imgsrc="./ui/images/juesequanxian.png"></td> <td>角色权限</td> </tr> </table> </td> </tr> </table> </td> </tr> <trwidth="152"> <td> <tablewidth="152"> <tr> <td> <tablewidth="98%"align="center"> <trstyle="color:red;background:blue"onClick="show('2')"> <td><imgsrc="./ui/images/kehu.png"></td> <td>客户管理</td> <td><imgsrc="./ui/images/zhankai.png"></td> </tr> </table> </td> </tr> <trid="tr0_2"style="DISPLAY:none"> <td><!--一列两个table--> <tablewidth="90%"align="center"> <tr> <td><imgsrc="./ui/images/kehuxinxi.png"></td> <td>客户信息</td> </tr> </table> <tablewidth="90%"align="center"> <tr> <td><imgsrc="./ui/images/lianxiren.png"></td> <td>联系人列表</td> </tr> </table> </td> </tr> </table> </td> </tr> <trwidth="152"> <td> <tablewidth="152"> <tr> <td> <tablewidth="98%"align="center"> <trstyle="color:red;background:blue"onClick="show('3')"> <td><imgsrc="./ui/images/xitong.png"></td> <td>系统管理</td> <td><imgsrc="./ui/images/zhankai.png"></td> </tr> </table> </td> </tr> <trid="tr0_3"style="DISPLAY:none"> <td> <tablewidth="90%"align="center"> <tr> <td><imgsrc="./ui/images/xitongrizhi.png"></td> <td>系统日志</td> </tr> </table> <tablewidth="90%"align="center"> <tr> <td><imgsrc="./ui/images/shujuzidian.png"></td> <td>数据字典</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> <scriptlanguage="JavaScript"> <!--jsdom:根据tr0_id,id的值,进行操作。得到tr的length,遍历,判断id值,根据传入的id值,拼装tr0_id,--> <!--拿到对应的tr元素,设置显示或隐藏--> functionshow(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表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。