layui结合ajax实现下拉联动效果

<div class="layui-form-item">
        <label class="layui-form-label">商品类别</label>
        <div class="layui-input-inline" style="width: 20%">
            <select name="categoryleveloneId"   lay-filter="classify" id="one">
                <option value="">请选择</option>
                <option  th:each="cate : ${oneList}" th:value="${cate.id}" th:text="${cate.name}"></option>
            </select>
        </div>
        <div class="layui-input-inline" style="width:  20%">
            <select name="categoryleveltwoId"  lay-filter="twoCate" id="two">
                <option value="">请选择</option>
                <option  th:each="cate : ${twoList}" th:value="${cate.id}" th:text="${cate.name}"></option>
            </select>
        </div>
        <div class="layui-input-inline" style="width:  20%">
            <select name="categorylevelthreeId" id="three">
                <option value="">请选择</option>
                <option  th:each="cate : ${threeList}" th:value="${cate.id}" th:text="${cate.name}"></option>
            </select>
        </div>
    </div>

<script>
    layui.use(['form', 'layer','laydate'],function(){
        $ = layui.jquery;  //获取jquey模块
        var form = layui.form; //获取form模块
        //第一个select改变事件
        form.on('select(classify)',function (data){
            //监听到了下拉框选择的选项，传递过来
            // console.log(data);//在控制台输出信息
            var classfies = data.value;
            //再利用ajax将数据传到后端，来获取到对应下拉框选项而出现的值
            $.ajax({
                type:"post",
                url:"/getCateByParentid",
                data:{"pid":classfies},
                dataType:"json",
                success:function (d) {
                    // layer.alert(1122)
                    //对应的值传回，拼出html下拉框语句
                    var tmp='';
                    for (var i in d){
                        tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
                    }
                    $("#two").html(tmp);
                    form.render();
                },error:function () {
                    layer.alert('请求失败');
                }
            });
        });
        //第二个select改变事件
        form.on('select(twoCate)',function (data){
            //监听到了下拉框选择的选项，传递过来
            // console.log(data);//在控制台输出信息
            var classfies = data.value;
            //再利用ajax将数据传到后端，来获取到对应下拉框选项而出现的值
            $.ajax({
                type:"post",
                url:"/getCateByParentid",
                data:{"pid":classfies},
                dataType:"json",
                success:function (d) {
                    //对应的值传回，拼出html下拉框语句
                    var tmp='';
                    for (var i in d){
                        tmp +='<option value="'+d[i].id+'">'+d[i].name+'</option>';
                    }
                    $("#three").html(tmp);
                    form.render();
                },error:function () {
                    layer.alert('请求失败');
                }
            });
        });
    })
</script>

//根据父编号查询信息(给前台传json格式的数据)
@RequestMapping("getCateByParentid")
@ResponseBody
public List<ProductCategory> getCateByParentid(Integer pid) {
    List<ProductCategory> cList = productCategoryService.getAllCategoryByParent(pid);
    return cList;
}