JavaScript + node 实现三级联动菜单

最新推荐文章于 2025-07-29 01:46:31 发布

LoveyL0201

最新推荐文章于 2025-07-29 01:46:31 发布

阅读量583

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript案例文章标签： javascript

本文链接：https://blog.youkuaiyun.com/chen_junfeng/article/details/109697868

这篇博客详细介绍了如何利用JavaScript和Node.js实现三级联动菜单。从项目分析到前端和后端的具体实现步骤，包括构造菜单结构、绑定事件、通过AJAX请求获取数据以及服务端接口设计和数据响应。文章最后提到，作者可以提供源码供学习交流。

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

三级联动菜单

项目分析
1. 效果
2. 前端
  
  =>面向对象
  
  =>首先分析下拉结构，构造相应的结构和样式
  
  =>绑定事件，点击，鼠标滑过等
  
  =>导入写好的 js 文件构造菜单项、
  
  =>使用ajax请求服务端获取数据
  
  =>用每次获取的数据动态生成页面结构
3. 服务端
  
  =>接口文档（定义接口，服务地址，端口}
  
  =>存储数据
  
  =>创建服务器
  
  =>接收前端的ajax请求，响应数据

代码

面向对象代码

export default class Select{
       
       
    //添加css样式
    static  addCSS(selector,style,title){
       
       
        if(title===undefined) title="xietian";
        var arr=Array.from(document.styleSheets);
        var  styleSheet=arr.reduce(function(value,item){
       
       
            if(item.title===title)return item;
            return value;
        },null);
        if(!styleSheet){
       
       
            var s=document.createElement("style");
            s.title=title;
            document.head.appendChild(s);
            styleSheet=document.styleSheets[document.styleSheets.length-1];
        }
        var str="";
        for(var prop in style){
       
       
            str+=prop.replace(/[A-Z]/g,function(value){
       
       
                return "-"+value.toLowerCase();
            })+":"+(typeof style[prop]==="number" ? style[prop]+"px" : style[prop])+";";
        }
        if(styleSheet.addRule){
       
       
            styleSheet.addRule(selector,str,styleSheet.cssRules.length);
        }else{
       
       
            styleSheet.insertRule(selector+"{ "+str+" }",styleSheet.cssRules.length);
        }
    }

//定义全局变量
    button;
    ul;
    class;
    constructor(parent,_class) {
       
       
        // this.id = _id;
        this.class = _class;
        this.elem = this.createEle();
        this.appendTo(parent);
    }
    //创建元素
    createEle() {
       
       
        const div = document.createElement('div');
        div.className = "dropdown " + this.class;
        this.button = document.createElement('button');
        this.button.className = "btn btn-default dropdown-toggle";
        this.button.addEventListener('click',e=>this.clickHander(e))
        this.content = document.createElement('span');
        this.content.innerText = "请选择";
        const carte = document.createElement('spa