如何用JavaScript在Node.js中实现三级联动下拉菜单？

本文共计1652个文字，预计阅读时间需要7分钟。

本文分享了使用JavaScript和Node.js实现三级联动菜单一的具体代码示例，供大家参考。以下为整体内容：

项目分析

1.效果：实现一个三级联动的菜单，用户可以选择不同级别的菜品。

2.前端：使用HTML、CSS和JavaScript。

3.后端：使用Node.js。

面向对象分析

1.下拉结构：使用HTML的标签实现下拉菜单。

2.构造结构：定义三个下拉菜单，分别对应三个级别的菜品。

3.绑定事件：为每个下拉菜单绑定事件，当用户选择某个选项时，自动更新其他下拉菜单的内容。

代码示例

javascript// 引入Node.js模块const http=require('http');const url=require('url');

// 菜单数据const menus=[ { id: 1, name: '主菜', children: [ { id: 11, name: '鱼香肉丝' }, { id: 12, name: '宫保鸡丁' } ]}, { id: 2, name: '汤品', children: [ { id: 21, name: '番茄蛋汤' }, { id: 22, name: '紫菜蛋花汤' } ]}];

// 创建HTTP服务器const server=http.createServer((req, res)=> { const parsedUrl=url.parse(req.url, true); const path=parsedUrl.pathname; const method=req.method;

if (path==='/menu' && method==='GET') { // 获取菜单数据 const menuData=JSON.stringify(menus); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(menuData); } else { res.writeHead(404); res.end('Not Found'); }});

// 监听3000端口server.listen(3000, ()=> { console.log('Server running on http://localhost:3000');});

总结本文通过一个简单的示例，展示了如何使用JavaScript和Node.js实现三级联动菜单。在实际项目中，可以根据需求进行扩展和优化。

本文实例为大家分享了JavaScript+node实现三级联动菜单的具体代码，供大家参考，具体内容如下

项目分析

1、效果

2、前端

=>面向对象

=>首先分析下拉结构，构造相应的结构和样式

=>绑定事件，点击，鼠标滑过等

=>导入写好的 js 文件 构造菜单项、

=>使用ajax请求服务端 获取数据

=>用每次获取的数据动态生成页面结构

3、服务端

=>接口文档（定义接口，服务地址，端口}

=>存储数据

=>创建服务器

=>接收前端的ajax请求，响应数据

代码

1、面向对象代码

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('span');         this.content.className = 'content';         carte.className = 'carte';         this.button.appendChild(this.content);         this.button.appendChild(carte);         this.ul = document.createElement('ul');         this.ul.className = "dropdown-menu";         this.button.appendChild(this.ul);         div.appendChild(this.button)         return div;     }     //添加点击事件     clickHander(e) {         this.ul.classList.toggle('on');     }    //增加li     addli(list) {         if(!list) return;         const frg = document.createDocumentFragment();         list.forEach(item=>{             const li = document.createElement('li');             li.innerHTML = item;             li.addEventListener('click',e=>this.liHandler(e));             frg.appendChild(li);         })         this.ul.appendChild(frg);     }     //给li添加的点击事件     liHandler(e) {         this.content.innerHTML = e.target.innerText;     }     //添加css样式     addCSS() {         Select.addCSS(".dropdown",{             position: "relative",             boxSizing: "border-box",             width: "8.33333333%",             display:"inline-block",             minHeight: "1px",             paddingRight: "15px",             paddingLeft: "15px",             fontSize: "14px",             lineHeight: "1.42857143",             color: "#333333",         })         Select.addCSS(".btn",{             display:'inlineBlock',             marginBottom:'0',             outline:"none",             fontWeight:'normal',             textAlign:'center',             whiteSpace:'nowrap',             verticalAlign:'middle',             touchAction:'manipulation',             cursor:'pointer',             backgroundImage:'none',             border:'1px solid transparent',             padding:'6px 12px',             fontSize:'14px',             lineHeight:'1.42857143',             borderRadius:'4px',             userSelect:'none',         })         Select.addCSS(".btn-default",{            color:'#333',             backgroundColor:'#fff',             borderColor:'#ccc',         })         Select.addCSS(".btn-default:hover",{             color:'#333',             backgroundColor:'#e6e6e6',             borderColor:'#adadad',         })         Select.addCSS(".carte",{             display:'inline-block',             width:'0',             marginLeft: "0",             height:'0',             verticalAlign:'middle',             borderTop:'4px dashed',             borderRight:'4px solid transparent',             borderLeft:'4px solid transparent',         })         Select.addCSS(".dropdown-menu",{             position:'absolute',             top:'100%',             left:'15px',             height:'200px',             overflowY:'scroll',             zIndex:'1000',             display:'none',             float:'left',             minWidth:'83px',             padding:'5px 0',             margin:'2px 0 0',             fontSize:'14px',             textAlign:'left',             listStyle:'none',             backgroundColor:'#fff',             backgroundClip:'paddingBox',             border:'1px solid #ccc',             border:'1px solid rgba(0, 0, 0, 0.15)',             borderRadius:'4px',             boxShadow:'0 6px 12px rgba(0, 0, 0, 0.175)',                  })         Select.addCSS(".on", {             display:"block!important",         })         Select.addCSS('li',{             textAlign:"center",         })         Select.addCSS('li:hover',{             backgroundColor:'#e6e6e6',         })     }     //添加到html结构中的位置     appendTo(parent) {         if(typeof parent == 'string') parent=document.querySelector(parent);         parent.appendChild(this.elem);         this.addCSS();     } }

2、向服务器请求ajax

<script type="module">         import Select from "./select.js";         // var list = ["北京","上海","广州","深圳","武汉"];         let citylist,provincelist,countylist,province_content,content_county;         var sel_p = new Select('.box','province');         ajax("city.json",(res)=>{              provincelist = Object.keys(res);             sel_p.addli(provincelist);             sel_p.elem.addEventListener('click',clickHandler)          province_content = document.querySelector('.province .content');             county()          })         var sel_c = new Select('.box','city');         function clickHandler(e) {             if(e.target.constructor!== HTMLLIElement) return;             ajax(`10.9.72.252:4001/province/?province=${e.target.innerText.trim()}`,function(res){                  citylist = Object.keys(res.city)                 sel_c.addli(citylist);                 const province = document.querySelector('.province ul');                 province.addEventListener('click',cityHandler);             })         }                  function cityHandler(e) {             const content_city = document.querySelector('.city .content');             const li = document.querySelectorAll('.city li');             const content_county  = document.querySelector('.county .content');             content_county.innerText=content_city.innerText = "请选择";             li.forEach(item=>{                 item.remove();             })         }             //获取区县数据        function county() {            var sel_conuty = new Select('.box','county');            sel_c.elem.addEventListener('click',e=>{             if(e.target.constructor!== HTMLLIElement) return;             ajax(`10.9.72.252:4001/city/?province=${province_content.innerText.trim()}&city=${e.target.innerText.trim()}`,function(res){                 // console.log(res);                  countylist =res.county                 sel_conuty.addli(countylist);                 const city = document.querySelector('.city ul');                 city.addEventListener('click',countyHandler);             })            })        }                     function countyHandler(e) {         const lis = document.querySelectorAll('.county li');         const content_coun = document.querySelector('.county .content');         content_coun.innerText = "请选择";         lis.forEach(item=>{                 item.remove();             })        }        //封装一个简单的         function ajax(url, fn) {                 // XMLHttpRequest对象用于在后台与服务器交换数据                 var xhr = new XMLHttpRequest();                 xhr.open('GET', url, true)                 xhr.onreadystatechange = function () {                     if(xhr.readyState == 4 && xhr.status ==200) {                         //从服务器获得数据                         fn.call(this, JSON.parse(xhr.responseText));                     }                 };                 //发送数据                 xhr.send();             } </script>

3、服务端

const http = require('http'); const querystring= require('querystring'); const city = require("../city.json"); const server = http.createServer(function(req, res) {     res.writeHead(200,{         "content-type":"text/html;charset=utf-8",         "Access-Control-Allow-Origin":"*",         "Access-Control-Allow-Headers":"*",         //请求头跨域 如果请求头发生修改并且非同源，就需要申请请求头跨域     });     req.on('data',function(_data) {         data=_data     })     req.on('end',function () {         // type是接口名称         console.log(req.url);         var type=req.url.trim().split("?")[0].replace(/\//g,"");         console.log(type);         if(req.method.toLowerCase()==="get"){             if(req.url.includes("favicon.ico")) return res.end();//如果get请求的是图标直接返回空跳出             // 如果是get请求，就从url中重新获取数据存入data变量             data=req.url.includes("?") ? req.url.split("?")[1] : "";         }         // 首先判断是否可以通过JSON解析，如果通过JSON直接转换，如果不能就是querystring解析         try{             data=JSON.parse(data);         }catch(e){             data=data ? querystring.parse(data) : {};             console.log(data);         }         let o = {}         switch(type){             case 'province':                 o = {};                 o.city = obj[data.province];                 break;             case 'city':                 o.city = obj[data.province];                 o.county = o.city[data.city];                 break;         }         res.write(JSON.stringify(o));         res.end();     }) }) //监听4001端口 server.listen(4001,"你的地址",function() {     console.log("服务器开启成功^_^"); })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。