下拉框之间的联动效果

需求：两个下拉框之间添加联动效果

开始是在controller层把根据大类id查询出来的结果放入Model，利用velocity循环输出

    /**
     * 产品类目页
     * @param model
     * @return
     */
    @RequestMapping(value = "/productType.do")
    public String productCategory(Model model){
        //TODO 显示产品类目
        model.addAttribute("parent_type", productService.getproduct_type());//产品大类
        model.addAttribute("child_type", productService.getproduct_item("0"));//产品类目

                <div class="col-md-4 col-xs-4 mb-10">
                    <label for="" class="col-md-4 col-xs-12 text-r">所属子类:</label>
                    <select name="" id="child_vategory" class="input-style col-md-8 col-xs-12">
                        <option value="">--请选择--</option>
                        #foreach($obj in ${child_type})
                            <option value="${obj.type_id}">$!{obj.type_name}</option>
                        #end
                    </select>

但是由于页面加载后不会再去Model读取，下拉选项并没有改变。

解决方法： 采用JsonArray传到前台，循环append到option

    @RequestMapping(value = "/getproduct_item.do")
    public void getproduct_item(String pid,Model model){
        if(pid==null || "".equals(pid)){
            pid="0";
        }
        String result="";

        List<Map<String ,Object>> list = productService.getproduct_item(pid);
        if(list.size()>0){
            JSONArray jsonArray = JSONArray.fromObject(list);
            result=jsonArray.toString();
        }
        ajaxReturn(result);
    }

        /**
         * 类目信息
         */
        $("#parent_type").on("change",function () {
            var pid=$("#parent_type").find("option:selected").val();
            $.ajax({
                url:'$rc.contextPath/product/getproduct_item.do',
                type:'post',
                data:{
                    pid:pid
                },
                datatype:'text',
                success:function(data){
                    var obj=$.parseJSON(data)
                    for(var i=0;i<obj.length;i++){
                        $("#child_type").append("<option value="+obj[i].type_id+">"+obj[i].type_name+"</option>");
                    }
                },
                error:function (data) {
                    layer.msg("请求异常" ,{icon:2,time:3000});
                }
            });
        });