动态级联菜单

最新推荐文章于 2023-04-24 13:06:31 发布

原创最新推荐文章于 2023-04-24 13:06:31 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #select

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了在项目中实现级联菜单时，通过JQuery动态加载数据以避免频繁数据库查询的问题。作者指出现有做法存在的耦合性和速度问题，并分享了一种简化版的JQuery实现方案，旨在提高代码效率和页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中遇到最多的就是级联菜单的实现。省级－市级－县级等等。如果将这些数据放到数据库中，每一次访问数据都要链接数据库。目前项目中的做法是select的每一次change事件都要查询一次。我觉得此次操作有些多余。先不说这些数据从哪里得到，或者要不要放到缓存中，或者这些数据是不易改变，还是时常改变。我自我感觉有两点不好：1、代码与页面的耦合性不好 2、会使页面的速度变慢。
所以，我就用JQuery简单实现了级联菜单的实现。为了避免有类似的问题，特将代码附上，以便以后查看。共勉!

var json = {'id':'-1','name':'',parentId:'-2','children':[
                {'id':'0','name':'河南',parentId:'-1',children:[
                    {'id':'01','name':'郑州','parentId':'0','children':
                        [{'id':'011','name':'二七区',parentId:'-1',children:'-1'}]},
                    {'id':'02','name':'新乡','parentId':'0','children':'-1'}]},
                {'id':'1','name':'江苏',parentId:'-1',children:[
                    {'id':'11','name':'江苏1','parentId':'1','children':'-1'},
                    {'id':'12','name':'江苏2','parentId':'1','children':'-1'}]}]};
    var Settings = {
            id:''
    };     
    var DyCacadeSelect = {
        init:function(id,json){
            Settings.id = id;
            DyCacadeSelect.recursion(json);
        },
        isChildren:function(note){
            return note.children == '-1';
        },
        recursion:function(root){
            if(DyCacadeSelect.isChildren(root)){
                return ;
            } else {
                DyCacadeSelect.initSelect(root);
                $.each(root.children,function(index,comment){
                    DyCacadeSelect.initOption(root,comment);
                    DyCacadeSelect.initSelectChange(root,comment);
                });
            }
        },
        initSelect:function(note){
            $("#"+Settings.id).append("<select"+
                    " class='lSelect' id='"+note['parentId']+"'>"+
                    "<option value=''>--请选择--</option></select>");
        },
        initOption:function(note,comment){
            $("#"+note['parentId']).append("<option "+
                    "value='"+comment['id']+"'>"+comment['name']+"</option>");
        },
        initSelectChange:function(note,comment){
            $("#"+note['parentId']).bind("change",function(){
                if($("#"+note['parentId']).val()==''){
                    DyCacadeSelect.clearNextAllSelect(note);
                }
                if(comment['id'] == $("#"+note['parentId']).val()){
                    DyCacadeSelect.existNextSelectOperatorClear(note);
                    DyCacadeSelect.recursion(comment);
                } 
            });
        },
        existNextSelectOperatorClear:function(note){
            if(DyCacadeSelect.isExistNextSelect(note)){
                DyCacadeSelect.clearNextAllSelect(note);
                return true;
            }
            return false;
        },
        clearNextAllSelect:function(note){
            $("#"+note['parentId']).nextAll('select').remove();
        },
        isExistNextSelect:function(note){
            var selectLength = $("select[id="+note['parentId']+"]").length;
            if(selectLength>0){return true;}
            return false;
        }
    };
    //调用方法
    DyCacadeSelect.init("select",json);