利用jQuery实现三级联动菜单选中赋值代码



18 71 24



特效描述:利用jQuery实现 三级联动 菜单选中 赋值代码,利用jQuery实现三级联动菜单选中赋值代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="treeBox.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/treeBox.js"></script>
<script src="js/data.js"></script>

3. HTML代码

<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';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 三级联动 按钮控制 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到