jquery实现select多级联动

之前在angular的时候实现多级联动很方便，只需监听某个变量的变化然后执行函数就行，昨天自己写了个联动：

var getOptions = function(param, domId){
        $.ajax({
            url:"/admin/ucm/queryResource?areaCode="+param,
            type:'get',
            success:function(res){
                var data = res.bizData.lists;

                $("#"+domId + " option:gt(1)").remove();
                //删除原有的1-n个option，防止不断追加
                for(var i = 0,len = data.length;i < len;i++){
                    (function(i){
                        if(!i){
                            $("#"+domId).append("<option value=\'" + data[i].code + "\' selected>" + data[i].name + "</option>");
                        }
                        else{
                            $("#"+domId).append("<option value=\'" + data[i].code + "\'>" + data[i].name + "</option>");
                        }
                        console.log(data[i]);
                    })(i)
                    //这里有闭包，小心绕行
                }
                $("#"+domId).trigger("change");
                //触发联动事件
            },
            error : function(){
                console.log("error",res);
            }
        })
    };



    $("#provence").change(function(){
        getOptions($("#provence").val(), "city")
    });
    $("#city").change(function(){
        getOptions($("#city").val(), "country")
    });
    $("#country").change(function(){
        getOptions($("#country").val(), "area")
    });
    getOptions("0","provence");
    //触发联动事件