在做web项目中,我们常常会遇到这种情况,特别是一些企业网站等web项目,经常会遇到二级联动这样的业务,用纯js做个人觉的效率低,代码量比较大,复杂了。
子个人学习了jquery以后,觉的jquery是一个非常好的aiax轻量级框架,特个实现后台java代码和前台js结合调用时非常方便,
二级联动:有部门和员工作为实例:
<SCRIPT type="text/javascript" src="js/jquery-1.6.1.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(function(){
$("#dept").change(function(){
var $dval=$(this).val();
$.getJSON("<%=path%>/emp/findemp.action?dept.deptid="+$dval,function(data){
var strHTML='<select name="" id="ddd"><option value="">--请选择--</option>';
$.each(data.emps,function(i,v){
strHTML+='<option value="'+v.empid+'">"'+v.empname+'"</option>';
})
strHTML+='</select>';
$("#emp").html(strHTML);
})
})
})
$(function(){
$("#btn").click(function(){
if($("#dept").val() != ""){
if($("#ddd").val() != ""){
$("#f").submit();
}else{
alert("员工不能为空");
return false;
}
}else{
alert("部门不能为空");
return false;
}
})
})
</SCRIPT>
</head>
<body>
<form action="" method="post" id="f">
<div>
<select id="dept" name="dept.deptid">
<option value="">--请选择--</option>
<s:iterator value="depts">
<option value="${deptid }"> ${deptname}</option>
</s:iterator>
</select>
</div>
<div id="emp"></div>
<input type="button" value="aa" id="btn"/>
</form>
</body>
</html>