下拉列表的二级联动

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方法
    }
}