JQuery的多级下拉菜单示例(一)

一个JQuery的多级下拉菜单示例代码演示,包含html、js、css,可以直接使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery input弹出多级联动选择菜单</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>
 
</body>
</html>

 

完整代码下载

链接:https://pan.baidu.com/s/1lW42KkaVIFONQo0EC4Fk0Q

提取码:n683

 

 

大T笔记所有文章均为本人原创,转载请您注明来源,并留下原文链接地址,是对我的尊重,也是对知识的尊重,谢谢!
大T笔记 » JQuery的多级下拉菜单示例(一)

大T笔记-我的个人互联网创业和自由职业之路

关于我 我的百宝箱
大T笔记-专注个人互联网创业和自由职业