树形菜单复选框级联选择HTML

本文介绍如何使用HTML实现树形菜单复选框的级联选择功能,提供相关HTML文档示例,帮助理解其工作原理。
摘要由CSDN通过智能技术生成

树形菜单复选框级联选择,对应的HTML文档:

<table id="treeTable1" style="width:100%;">
            <thead>
                <tr>
                    <th style="width:30%">模块标题</th>
                    <th>标识符</th>
                    <th style="width:10%">类别</th>
                    <th style="width:20%">链接</th>
                    <th style="width:10%">排序</th>
                </tr>
            </thead>
            <tbody>
            <tr id="1">
                <td><input type="checkbox" name="mid" value="1" οnclick="chkModel(this);" /> 系统管理</td>
                <td class="center"></td>
                <td class="center">组</td>
                <td class="center"></td>
                <td class="center">1</td>
            </tr>
            <tr id="47" pId='1'>
                <td><input type="checkbox" name="mid" value="47" οnclick="chkModel(this);" /> 用户权限设定</td>
                <td class="center">Sys_UserModelConfigList</td>
                <td class="center">模块</td>
                <td class="center">Sys_UserModelConfigList.aspx</td>
                <td class="center">1</td>
            </tr>
            <tr id="12" pId='1'>
                <td><input type="checkbox" name="mid" value="12" οnclick=
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
好的,这是一个基于 HTML、JavaScript 和 jQuery 的树形选择框代码: HTML 代码: ``` <div id="tree"> <select id="level1"> <option value="">请选择一级分类</option> <option value="1">分类1</option> <option value="2">分类2</option> <option value="3">分类3</option> </select> <select id="level2"> <option value="">请选择二级分类</option> </select> <select id="level3"> <option value="">请选择三级分类</option> </select> </div> ``` JS 代码: ``` $(function() { var treeData = [ { "id": "1", "text": "分类1", "children": [ { "id": "1-1", "text": "分类1-1", "children": [ { "id": "1-1-1", "text": "分类1-1-1" }, { "id": "1-1-2", "text": "分类1-1-2" } ] }, { "id": "1-2", "text": "分类1-2", "children": [ { "id": "1-2-1", "text": "分类1-2-1" }, { "id": "1-2-2", "text": "分类1-2-2" } ] } ] }, { "id": "2", "text": "分类2", "children": [ { "id": "2-1", "text": "分类2-1", "children": [ { "id": "2-1-1", "text": "分类2-1-1" }, { "id": "2-1-2", "text": "分类2-1-2" } ] }, { "id": "2-2", "text": "分类2-2", "children": [ { "id": "2-2-1", "text": "分类2-2-1" }, { "id": "2-2-2", "text": "分类2-2-2" } ] } ] }, { "id": "3", "text": "分类3", "children": [ { "id": "3-1", "text": "分类3-1", "children": [ { "id": "3-1-1", "text": "分类3-1-1" }, { "id": "3-1-2", "text": "分类3-1-2" } ] }, { "id": "3-2", "text": "分类3-2", "children": [ { "id": "3-2-1", "text": "分类3-2-1" }, { "id": "3-2-2", "text": "分类3-2-2" } ] } ] } ]; var $level1 = $('#level1'), $level2 = $('#level2'), $level3 = $('#level3'); // 初始化一级分类 for (var i = 0; i < treeData.length; i++) { $level1.append('<option value="' + treeData[i].id + '">' + treeData[i].text + '</option>'); } // 当一级分类中时,动态创建二级分类 $level1.on('change', function() { var val = $(this).val(); $level2.empty().append('<option value="">请选择二级分类</option>'); for (var i = 0; i < treeData.length; i++) { if (treeData[i].id === val) { var children = treeData[i].children; if (children && children.length > 0) { for (var j = 0; j < children.length; j++) { $level2.append('<option value="' + children[j].id + '">' + children[j].text + '</option>'); } } } } $level2.trigger('change'); }); // 当二级分类中时,动态创建三级分类 $level2.on('change', function() { var val = $(this).val(); $level3.empty().append('<option value="">请选择三级分类</option>'); for (var i = 0; i < treeData.length; i++) { var children = treeData[i].children; if (children && children.length > 0) { for (var j = 0; j < children.length; j++) { if (children[j].id === val) { var grandchildren = children[j].children; if (grandchildren && grandchildren.length > 0) { for (var k = 0; k < grandchildren.length; k++) { $level3.append('<option value="' + grandchildren[k].id + '">' + grandchildren[k].text + '</option>'); } } } } } } }); }); ``` 这段代码实现了一个三级树形选择框,当一级分类中时,动态加载二级分类;当二级分类中时,动态加载三级分类。根据你的实际需求,你可以修改 treeData 数组中的分类数据。希望这个代码对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值