java后台+ajax实现三级联动

前端部分代码：省份是预先加载出来的，访问这个页面的时候，在后台拿的数据，原理很简单，这里是freemaker的静态模版

 					<tr >
                        <td>
                            <label for="j_dialog_name" class="control-label x90">代理区域：</label>
                            <select name="agent.id" id="province" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
                                  <option value="0">-请选择-</option>
                                <#list listagent as agent>
                                  <option value="${agent.id}">${agent.cname}</option>
                                </#list>
                            </select><span>省</span>
                            <select name="agent.id" id="city" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
                                <option value="0">请选择</option>
                            </select><span>市</span>
                            <select name="agent.id" id="area" data-style="btn-default btn-sel" data-width="auto" style="width: 100px">
                                <option value="0">请选择</option>
                            </select><span>县(区)</span>
                        </td>
                    </tr>

jq代码

$("#province").change(function () {

   $("#city option:gt(0)").remove();//先清除市和县的下拉列表
    $("#area option:gt(0)").remove();
   var cityid=$(this).val()//获取省份选择的值
   console.log(cityid);//前台打印测试，这个不用管
    if(cityid!=0){//发送ajax请求
        $.ajax({
            url: "bycity",
            type: "post",
            dataType: "json",
            data:{
                cityid:cityid
            },
            async: true,
            success: function(data) {
                if(data.stauts==0){//拿到后台发过来的值
                    var list=data.list;
                    console.log(list);
                    for (var i = 0; i < list.length; i++) {
                        var district = list[i];//将数据里的对象遍历取出
                        $("#city").append(//添加下拉选项
                                "<option value='" + district.id + "'>"//将id作为选项的值
                                + district.cname + "</option>");
                    }
                }else{
                    alert(data.message);
                }

            }
        });
    }

});

//县，和上面一样的道理
$("#city").change(function () {

    $("#area option:gt(0)").remove();
    var cityid=$(this).val();
    console.log(cityid);
    if(cityid!=100){
        $.ajax({
            url: "bycity",
            type: "post",
            dataType: "json",
            data:{
                cityid:cityid
            },
            async: true,
            success: function(data) {
                if(data.stauts==0){
                    var list=data.list;
                    console.log(list);
                    for (var i = 0; i < list.length; i++) {
                        var district = list[i];//将数据里的对象遍历取出
                        $("#area").append(//添加下拉选项
                                "<option value='" + district.id + "'>"//将id作为选项的值
                                + district.cname + "</option>");
                    }
                }else{
                    alert(data.message);
                }
            }
        });
    }
}); </script>