ajax省市区三级联动

本文思路页面加载时通过ajax向后台请求省级数据，通过onchange事件，根据选择的省向后台请求市级数据，同样添加onchange事件，根据市向后台请求区级数据。
html代码

<div class="col-sm-4">
        <select id="province" name="province" class="form-control"  >
                <option value="${provinces.pubCode}">${provinces.nodeName}</option>
        </select>
</div>
<div class="col-sm-4">
        <select id="city" name="city" class="form-control" >
                <option value="${city.pubCode}">${city.nodeName}</option>
        </select>
</div>
<div class="col-sm-4">
        <select id="areaCode" name="areaCode" class="form-control" >
                <option value="${areaCode.pubCode}">${areaCode.nodeName}</option>
        </select>
</div> 

js代码

/* 加载区域省份信息*/
$(document).ready(function() {
/* 第一个参数是下拉框ID,第二个参数1代表省，2代表市，3代表区 */
    loadProvinces("province","1","");
    $("#province").on('change',function(){
        loadProvinces("city","2",$("#province").val());
    });
    $("#city").on('change',function(){
        loadProvinces("areaCode","3",$("#city").val());
    });
});
function loadProvinces(selectId,nodeLevel,parentCode){
$.get("${ctx}/sys/provinces/getProvincesList?nodeLevel="+nodeLevel+"&parentCode="+parentCode,function(data,status){
        if(data!=null && data.length >0){
            var str = "";
            str += ("<option value=''>请选择</option>");
            for(var _i=0;_i<data.length;_i++){
                str +=("<option value='"+data[_i].pubCode+"'>"+data[_i].nodeName+"</option>");
            }
            $("#"+selectId).html(str);
        }
    },"json");
}

怎么样，是不是很简单