<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery支持多选三级联动菜单选中赋值代码</title>
<link type="text/css" rel="stylesheet" href="treeBox.css">
<script src="js/jquery.min.js"></script>
<script src="js/treeBox.js"></script>
</head>
<body>
<div id="treeBox" style="text-align:center;"><!--id必须是treeBox -->
<input class="focusEl" type="text" placeholder="请选择">
<input class="jobType" type="hidden" name="jobType[]" value="">
<input class="jobType" type="hidden" name="jobType[]" value="">
<input class="jobType" type="hidden" name="jobType[]" value="">
</div>
<script src="js/data.js"></script> <!--jobs 在这里引入了data -->
<script>
treeBox({
el:'$(".focusEl")', //焦点事件DOM 必传
// width:{ // 各级列表宽度 可选 不传默认值就为 160，160，160，200
// lv1:160,
// lv2:160,
// lv3:160,
// selected:200
// },
// selectedNum:3,// 设置可以选择多少个复选框 可选 不传默认3
// height:280, //高度 不传默认值 280
selectedNum:5,
data:jobs.info, //数据 必传
topData:hotJobs.data,// 常用数据 可选
confirm:function (res) { //回调函数 必传 会以json的格式返回所选中的数据
for(var k in res) {
$(".jobType").eq(k).val(res[k].value);
$(".jobType").eq(k).attr('name','jobType['+ res[k].uid +']');
}
}
});
</script>
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
jQuery支持多选三级联动菜单选中赋值代码.zip
版权申诉
189 浏览量
2023-09-21
00:12:11
上传
评论
收藏 37KB ZIP 举报
jQuery支持多选三级联动菜单选中赋值代码.zip （6个子文件） 
treeBox.css 3KB
js data.js 15KB treeBox.js 10KB jquery.min.js 85KB
index.html 2KB images 
tree-del.png 1KB资源评论
