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