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