1/17号的项目里用到了二级联动,最开始,组长让用easyui的combobox来二级联动。但看了半天,只是一些属性,方法。逻辑上面的原理,以及怎么实现的,通过框架是无法理解的,用了一整天,还是失败了,后来找另一名同事,开始用combobox也写不出来,后来还是用原生js和ajax搞定了!
二级联动 还要考虑到选择具体的民警,下方会对应该警员的打卡记录。
具体的思路是这样的:
选择警种,然后筛选出该警种的警员
首先先利用下列代码取到该警种的value值,我设置的分别是0,1,2,3,4,5,6 这几个是后台usertype的值 根据这几个值可以取到对应的数据
然后利用ajax 循环遍历出对应的名字 list的参数id就是usertype ,然后就能根据list[i].nikename输出每个人的名字
function list(id){
$.ajax({
type:'get',
url:"/getuserlist?usertype="+id,
success:function(data){
console.log(data);
var list = data.userlist;
$("#gay_police").empty()
var name = ""
for(var i=0;i<list.length;i++){
name += '<option value="'+list[i].id+'">'+list[i].nickname+'</option>'
}
$("#gay_police").append(name);
around();
}
});
}
这个时候还没有结束,因为选择警种是要变化的,所以我们要用jquery的change方法
$(function(){
var seleVal = $("#sss").val(); //取到警种的值
list(seleVal) //将警种的usertype 1,2,3作为参数传入ajax执行list()
$("#sss").change(function(){ //当警种的Input框发生改变后 再执行list() 这里不知道为什么不能用变量,
list($("#sss").val())
})
$("#gay_police").change(function(){ //当选择的警察改变后,执行around();
around()
})
$("#gay-date").change(function(){ //当选择的日期改变后,执行around();
around()
})
})
看到上述代码就知道还没有完,因为我还要根据日期和选择具体的警员来筛选结果,具体的打卡记录。
function around(){
//获取警员的id值
var user_id=document.getElementById("gay_police").value; //获取警员的id值
var date = document.getElementById("gay-date").value; //获取时间的值
if(!date){ //如果已进入没有日期的话,取到当前年月日
date = new Date().Format("yyyy-MM-dd"); //改变日期格式
$("#gay-date").val(date); //取到日期
}
if(user_id){
getData("getxldata?querydate="+date+"&id="+user_id+""); //执行另一个页面的js方法
}
}