zoukankan      html  css  js  c++  java
  • jQuery select三级联动

    一:controller代码:

    后台就简单返回map集合就行,表结构也是简单的通过父类Id来实现的

    /**
         * 三级联动
         * @param id 父类id
         * @return
         */
        @RequestMapping(value = "/Options", method = { RequestMethod.POST, RequestMethod.GET})
        @ResponseBody
        public List<Map<String, Object>> Options(int id){
            List<Map<String, Object>> dataList=new ArrayList<Map<String,Object>>();
            try {
                if(id!=null && id!=0){
                    List<Item> items=itemService.getAllName(id);
                    for (Item i : items) {
                        Map<String, Object> map=new HashMap<String, Object>();
                        map.put("id", i.getId());
                        map.put("name", i.getName());    
                        dataList.add(map);
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return dataList;
        }        

    二:前端代码(ajax实现页面无刷新):

    $().ready(function() {
    
        $("#oneId").on("change",function(){
            var oneId = $("#oneId").val();
            $("#twoId").html("<option value='0'>--请选择--</option>");
            $("#threeId").html("<option value='0'>--请选择--</option>");
            $.ajax({
                url: "Options.action",
                type: "POST",
                data: {
                    itemCatId:oneId //一级类目id
                },
                dataType: "json",
                success: function(data) {
                    $.each(data, function(idx, obj) {
                        $("#twoId").append("<option value='"+obj.id+"'>" + obj.name + "</option>");
                    });
                }
            });    
        });
        $("#twoId").change(function () {
            var twoId = $("#twoId").val();
            $("#threeId").html("<option value='0'>--请选择--</option>");
            $.ajax({
                url: "Options.action",
                type: "POST",
                data: {
                    itemCatId:twoId//二级类目id
                },
                success: function(data) {
                    $.each(data, function(idx, obj) {
                        $("#threeId").append("<option value='"+obj.id+"'>" + obj.name+ "</option>");
                    });
                }
            });    
        });
    });   
    页面代码就不贴了,此三级联动是在绑定好一级分类的基础上进行的,oneId,twoId,threeId分别指一,二,三级select的id
  • 相关阅读:
    06. 如何去掉数组中的重复性数据
    01. 作用域和值类型引用类型的传递
    韩昊 20190919-5 代码规范,结对
    韩昊 20190919-6 四则运算试题生成,结对
    韩昊 20190919-2 功能测试
    韩昊20190912-1 每周例行报告
    将py文件打包为exe文件方法
    关于四个定义的理解
    韩昊 20190912-2 命令行
    韩昊 20190905-1 每周例行报告
  • 原文地址:https://www.cnblogs.com/hxbhdljmyz/p/9317826.html
Copyright © 2011-2022 走看看