一文详解JS实现三级联动菜单（附思路说明）
时间：2022-08-18 08:58:02
作者：互联网
https://c***mg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b3c43d3711.css"/>
思路：每一个下拉菜单作为一个组件，可以接收一组数据，根据数据内容不同生成不同的菜单选项。三级之间的关联通过事件抛发来实现。数据从后台获取。
当点击省份菜单选择陕西时，菜单组件会通过事件抛发把当前的省份抛发出来。得知省份之后就可以从后台获取省份下面的城市数据。依次类推。
实现效果：
前后端接口信息：
三级级联菜单接口：
## URL:http:***.9.72.245:4010
## Method: "GET"
## 数据格式：
请求：QueryString
响应：JSON
接口名称：
1、http://10***2.245:4010/getProvince
2、http://10***2.245:4010/getCity
3、http://10***2.245:4010/getCounty
获取省份接口
接口名：/getProvince
请求：无参数
响应：{"province":["北京","天津","河北",...]}
获取城市接口：
接口名：/getCity
请求：?province="河北"
响应：{"city":["石家庄", "唐山", "秦皇岛",...]}
获取县接口：
接口名：/getCounty
请求：?city="石家庄"
响应：{"county":["长安区", "桥东区", "桥西区",...]}
具体实现：
1、创建下拉菜单组件及前后端通信：
in***al-scale=1.0">
Document
2、下拉菜单组件：DropDownMemu类
import Component from "./***ponent.js"; export default class DropDownMemu extends Component { _list; // 当前下拉菜单的可选项。 _name; // 当前选择显示的名字例如： "北京" label; // 当前下拉菜单的标签，province city county spanLabel; // 标签容器 spanCaret; // 三角形 ul; // 下拉选项容器 bool=false; // 控制鼠标事件，聚焦状态或正在选择时，不触发鼠标划入滑出效果。 // 根据不同的状态设置下拉菜单的样式。 static DROPDOWN = Symbol(); static DEFAULT = Symbol(); // 静态全局变量 每创建一个下拉菜单，都存储到这个对象中，全局管理创建的每一个下拉菜单。 static Obj = {}; constructor(_label) { super("p"); th***label = _label; // 创建HTML结构 th***render(); // 设置样式 th***setStyle(); // 鼠标滑入滑出点击，聚焦失焦，点击事件 th***elem.addEventListener("focusin", e =>th***mouseHandler(e)); th***elem.addEventListener("focusout", e =>th***mouseHandler(e)); th***elem.addEventListener("mouseenter", e=>th***mouseHandler(e)); th***elem.addEventListener("mouseleave", e=>th***mouseHandler(e)); th***elem.addEventListener("click", e => th***mouseHandler(e)); } mouseHandler(e){ switch(e.type){ case "mouseenter": if(th***bool) return th***elem.style.backgroundColor = "#e6e6e6"; break; case "mouseleave": if(th***bool) return th***elem.style.backgroundColor = "#fff"; break; case "focusin": th***setState(Dr***ownMemu.DROPDOWN); th***bool = true; break; case "focusout": th***setState(Dr***ownMemu.DEFAULT); th***bool = false; case "click" : if(e.***get.constructor !== HTMLLIElement) return th***_name = e.***get.textContent; // 当点击时修改当前显示的内容，重设样式，并抛发事件告知外部当前的内容。 th***setContent(); let evt = new FocusEvent("focusout"); th***elem.dispatchEvent(evt); } } set name(_name){ th***_name = _name; th***setContent(); } get name(){ return th***_name; } set list(_list){ th***_list = _list; th***ul.innerHTML = ""; th***ul.appendChild(th***createLi()); } // 修改菜单当前显示的内容并并抛发数据 setContent(_name){ th***_name = _name || th***_name; th***spanLabel.textContent = th***_name; let evt = new MouseEvent("change"); if(!evt.data) evt.data = {} evt.data[th***label] = th***_name; th***dispatchEvent(evt); } // 根据指定的list创建下拉菜单选项。 createLi(_list){ th***_list = _list || th***_list; let elem = do***ent.createDocumentFragment(); th***_list.forEach((item, index) => { let li = do***ent.createElement("li"); li***xtContent = item; Ob***t.assign(li.style, { lineHeight:"26px", padding:"0 15px", }) el***appendChild(li); }) return elem; } setState(type){ switch(type){ case Dr***ownMemu.DROPDOWN: th***elem.style.backgroundColor = "#e6e6e6"; th***ul.style.display = "block"; break; case Dr***ownMemu.DEFAULT: th***elem.style.backgroundColor = "#fff"; th***ul.style.display = "none"; break; } } appendTo(parent){ su***.appendTo(parent); Dr***ownMemu.Obj[th***label] = this; } render() { th***elem.setAttribute("tabIndex",1); th***spanLabel = do***ent.createElement("span"); th***spanCaret = do***ent.createElement("span"); this.ul = do***ent.createElement("ul"); this.el***appendChild(this.ul); th***spanLabel.textContent = th***_name; this.el***appendChild(th***spanLabel); this.el***appendChild(th***spanCaret); } setStyle() { Ob***t.assign(th***elem.style, { float: "left", minHeight: "20px", minWidht: "80px", color: "#333", fontWeight: "normal", textAlign: "center", whiteSpace: "nowrap", verticalAlign: "middle", cursor: "pointer", border: "1px solid #ccc", borderRadius: "4px", backgroundColor: "#fff", padding: "6px 12px", fontSize: "14px", userSelect: "none", marginRight: "100px", position:"relative", }); Ob***t.assign(th***spanLabel.style, { float: "left", padding: "0 5px" }) Ob***t.assign(th***spanCaret.style, { display: "inline-block", verticalAlign: "middle", borderTop: "4px dashed", borderRight: "4px solid transparent", borderLeft: "4px solid transparent", }) Ob***t.assign(th***ul.style, { listStyle: "none", position: "absolute", top: "100%", left: "0", zIndex: "1000", minWidth: "100px", padding: "5px 0px", margin: "2px 0 0", fontSize: "14px", textAlign: "left", backgroundColor: "#fff", border: "1px solid rgba(0, 0, 0, 0.15)", borderRadius: "4px", boxShadow: "0 6px 12px rgba(0, 0, 0, 0.175)", display: "none", }) } }
3、Component 父类：
export default class Component extends EventTarget{
elem;
constructor(_type){
super();
th***elem = th***createElem(_type);
}
createElem(_type){
let elem = do***ent.createElement(_type);
return elem;
}
appendTo(parent){
if(typeof parent==="string") parent = do***ent.querySelector(parent);
pa***t.appendChild(th***elem);
}
}4、nodejs后台服务：
let http = require("http");
let querystring = require("querystring");
let data,
req,
res;
// 读取所有城市数据并解析为对象，同步读取。
let fs = require("fs");
let allCityInfo = JS***parse(fs***adFileSync('./***y.json';));
let server = http.crea***rver(listenerHandler);
se***r.listen(4010,"10.9.72.245",listenerDoneHandler);
function listenerHandler(_req,_res){
req = _req;
res = _res;
re***riteHead(200,{
"content-type":"text/html;charset=utf-8",
"Access-Control-Allow-Origin":"*",
"Access-Control-Allow-Headers":"*",
});
data="";
req.on("data",function(_data){
data=_data;
})
req.on("end",receiveHandler);
}
function receiveHandler(){
// co***le.log(allCityInfo);
// 根据请求头的url解析接口类型
let type = re***rl.trim().split("?")[0].replace(///g,"");
co***le.log(type);
// 根据请求头的url解析传入的参数
if(re***ethod.toUpperCase()==="GET"){
if(re***rl.includes("fa***on.ico")) return res.end();
else data = re***rl.includes("?") ? re***rl.split("?")[1] : "";
}
try{
data = JS***parse(data);
}catch{
data = qu***string.parse(data);
}
co***le.log(data);
// 根据接口类型查找数据。
let list = {};
switch(type){
case "getProvince":
li***province = Ob***t.keys(allCityInfo);
break;
case "getCity" :
li***city = Ob***t.keys(allCityInfo[da***province]);
break;
case "getCounty":
li***county = allCityInfo[da***province][da***city];
break;
}
co***le.log(list);
re***rite(JS***stringify(list));
res.end()
}
function listenerDoneHandler(){
co***le.log("开启服务成功");
}4%***80%81%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%95%B0%E6%8D%AE%E4%BB%A5json%E6%A0%BC%E5%BC%8F%E5%AD%98%E5%82%A8%E5%9C%A8ci***json%E4%B8%AD%EF%BC%8C%E5%A6%82%E4%B8%8B%E6%89%80%E7%A4%BA%EF%BC%9A">5、服务端数据以json格式存储在ci***json中，如下所示：
{
"北京": {
"北京": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县", "其他"]
},
"天津": {
"天津": ["和平区", "河东区", "河西区", "南开区", "河北区", "红挢区", "滨海新区", "东丽区", "西青区", "津南区", "北辰区", "宁河区", "武清区", "静海县", "宝坻区", "蓟县", "塘沽区", "汉沽区", "大港区", "宝坻区", "其他"]
},
}
以上就是一文详解JS实现三级联动菜单（附思路说明）的详细内容，更多请关注php中文网其它相关文章！
