jsp三级联动菜单,jquery三级联动菜单
思路：每一个下拉菜单作为一个组件，可以接收一组数据，根据数据内容不同生成不同的菜单选项。三级之间的关联通过事件抛发来实现。数据从后台获取。
当点击省份菜单选择陕西时，菜单组件会通过事件抛发把当前的省份抛发出来。得知省份之后就可以从后台获取省份下面的城市数据。依次类推。【相关推荐：JavaScript视频教程】
实现效果：
前后端接口信息：
三级级联菜单接口：
##网址：http://10.9.72.245:4010
##方法："获取"
## 数据格式：
请求：查询字符串
响应：JSON
接口名称：
1、http://10 .9 .72 .245:4010/获取省份
2、http://10.9.72.245:4010/getCity
3、http://10 .9 .72 .245:4010/获取县
获取省份接口
接口名：/getProvince
请求：无参数
响应：{ 省:[北京,天津,河北，]}
获取城市接口：
接口名：/getCity
请求：省=河北
响应：{city:[石家庄, 唐山, 秦皇岛，]}
获取县接口：
接口名：/getCounty
请求：city=石家庄
响应：{county:[长安区, 桥东区, 桥西区，]}
具体实现：
1、创建下拉菜单组件及前后端通信：
!声明文档类型
超文本标记语言
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
/头
身体
脚本类型="模块"
从""导入查询字符串./js/查询字符串。js’；
从导入DropDownMemu ./js/dropdownmemu。js’；
let city info={ }；
init()；
函数init(){
ajax(http://10.9.72.245:4010 ， getProvince ).然后（成功功能)。接住(故障函数);
}
//ajax通信成功后执行：
函数成功函数(_data){
设data=JSON。parse(_ data)；
设key=object。密钥(数据)[0]；
数据=对象。值(数据)[0]；
if(DropDownMemu .Obj[key]){
DropDownMemu .钥匙，钥匙.列表=数据；
DropDownMemu .钥匙，钥匙.name=data[0]；
}否则{
let memu=new DropDownMemu(key)；
memu.addEventListener(change ，changeHandler)；
memu.list=data
memu。name=data[0]；
memu。appendto( body )；
city info[key]=data[0]；
}
}
//当菜单显示内容改变时接收到菜单抛发出的事件并获取事件中携带的信息例如{ 省:陕西}或者{ 城市:西安}
函数更改处理程序{
设key=e .当前目标。标签；
city info[key]=e . data[key]；
让界面命名
if(e.data.province){
interfaceName= getCity
}else if(e.data.city){
interfaceName= getCounty
}否则{
返回
}
ajax(http://10.9.72.245:4010 ，interfaceName，cityInfo).然后（成功功能)。接住(故障函数);
}
/*
创建交互式、快速动态网页应用的网页开发技术通信：
参数列表：
网址：后台服务地址
接口类型：接口类型，如获取省份
数据：传输的数据，例如：{ 省份:陕西}
通信类型类型：默认得到请求
是否以数据格式发送数据：默认为错误的
*/
函数ajax(url，interfaceType，data，type=get ，json=false){
类型=类型。toupper case()；
设o=type===GET ？空：数据；
if(data) data=json？JSON。stringify(data):查询字符串。stringify(数据)；
其他数据="";
返回新承诺（功能（解决，拒绝){
设xhr=new XMLHttpRequest()；
xhr.open(type，URL /接口类型(type=== GET ？?数据： )));
xhr。发送(o)；
xhr。onreadystatechange=function(){
if(xhr。就绪状态===4 xhr。状态===200){
解决(xhr。回应)；
}else if(xhr.readyState===4){
解决(xhr。状态)；
}
}
xhr.onerror=function(){
拒绝(xhr。回应)；
}
})
}
//ajax通信失败时执行
函数失败函数(_err){
控制台。log(_ err)；
}
/脚本
/body
/html
2、下拉菜单组件：DropDownMemu类
从导入组件100/组件。js’；
导出默认类DropDownMemu扩展组件{
_ list//当前下拉菜单的可选项。
_ name//当前选择显示的名字例如： 北京
标签；//当前下拉菜单的标签，省市县
spanLabel//标签容器
spanCaret//三角形
ul；//下拉选项容器
bool=false//控制鼠标事件，聚焦状态或正在选择时，不触发鼠标划入滑出效果。
//根据不同的状态设置下拉菜单的样式。
静态下拉=Symbol()；
静态默认值=Symbol()；
//静态全局变量每创建一个下拉菜单，都存储到这个对象中，全局管理创建的每一个下拉菜单。
静态obj={ }；
构造函数(_label) {
超级( p )；
this.label=_ label
//创建超文本标记语言结构
这个。render()；
//设置样式
这个。set style()；
//鼠标滑入滑出点击，聚焦失焦，点击事件
这个。elem。addevent listener( focus in ，e=this。mouse handler(e))；
这个。elem。addevent listener( focus out ，e=this。mouse handler(e))；
这个。elem。addevent listener( mouse enter ，e=this。鼠标处理器(e))；
这个。elem。addevent侦听器( mouseleave ，e=this。mouse handler(e))；
这个。elem。addevent listener( click ，e=this。mouse handler(e))；
}
鼠标处理程序(e)
开关(e型){
案例“鼠标进入”:
if(this.bool)返回
这个。elem。风格。背景色= # e6e6e 6
打破；
案例"鼠标离开":
if(this.bool)返回
这个。elem。风格。背景色= # fff
打破；
case focusin :
this.setState(DropDownMemu .下拉菜单);
this.bool=true
打破；
case focusout :
this.setState(DropDownMemu .默认);
this.bool=false
案例"点击":
if(e.target.constructor！==HTMLLIElement)返回
这个. name=e . target。文本内容；
//当点击时修改当前显示的内容，重设样式，并抛发事件告知外部当前的内容。
这个。set content()；
let evt=新焦点事件( focus out )；
这个。elem。调度事件(evt)；
}
}
集合名称(_name){
这个. name=_ name
这个。set content()；
}
get name(){
归还这个.姓名
}
集合列表(_list){
这个. list=_ list
这个。ul。innerhtml=
这个。ul。appendchild(这个。创建Li())；
}
//修改菜单当前显示的内容并并抛发数据
setContent(_name){
这个. name=_name 这个.姓名
这个。跨度标签。文本内容=this ._ name
let evt=新鼠标事件( change )；
如果(!evt.data) evt.data={}
evt.data[this.label]=this ._ name
这个。调度事件(evt)；
}
//根据指定的目录创建下拉菜单选项。
createLi(_list){
这个. list=_list 这个.列表
让elem=document。createdocumentfragment()；
这个. list.forEach((item，index)={
让李=文档。createelement(“Li”)；
李. textContent=项目
Object.assign(li.style，{
行高：“26px”，
填充：“0 15px”，
})
elem.appendChild(李);
})
返回初步的
}
设置状态(类型){
开关（类型){
案例下拉菜单.下拉列表：
这个。elem。风格。背景色= # e6e6e 6
这个。ul。风格。display= block
打破；
案例下拉菜单.默认值：
这个。elem。风格。背景色= # fff
这个。ul。风格。display= none
打破；
}
}
附录(父项){
超级棒。appendto(parent)；
DropDownMemu .这个。标签]=this；
}
render() {
这个。elem。设置属性( tabIndex ，1)；
这个。span label=文档。createelement(“span”)；
这个。span caret=文档。createelement(“span”)；
这个。ul=文档。createelement(“ul”)；
这个。elem。appendchild(这个。ul)；
这个。跨度标签。文本内容=this ._ name
这个。elem。appendchild(这个。跨度标签)；
这个。elem。appendchild(这个。span caret)；
}
setStyle() {
Object.assign(this.elem.style，{
浮动："左",
最小高度： 20像素，
明威德特： 80像素，
颜色： #333 ,
fontWeight:正常，
文本对齐："居中",
空白： nowrap ，
垂直对齐："中间",
光标："指针",
边框：“1px纯色#ccc "，
borderRadius:“4px”，
背景色：" # fff "，
填充：“6px 12px”，
fontSize: 14px ，
用户选择：无，
右边距：" 100像素",
位置："相对",
});
对象。分配(这个。跨度标签。风格，{
浮动："左",
填充：" 0 5px "
})
对象。分配(这个。span插入符号。风格，{
显示："内嵌块",
垂直对齐："中间",
边框顶部：“4px虚线",
右边框：“4px纯色透明",
borderLeft: 4px纯色透明，
})
Object.assign(this.ul.style，{
列表样式："无",
位置："绝对",
顶部："100%",
左："0",
zIndex: 1000 ，
最小宽度："100像素",
填充：“5px 0px”，
边距：“2px 0 0”，
fontSize: 14px ，
文本对齐：左，
背景色：" # fff "，
边框： 1px实心rgba(0，0，0，0.15)，
borderRadius:“4px”，
boxShadow: 0 6px 12px rgba(0，0，0，0.175)，
显示："无",
})
}
}
3、Component 父类：
导出默认类组件扩展事件目标{
初步的
构造函数(_type){
super()；
这个。elem=这个。创建elem(_ type)；
}
createElem(_type){
设elem=文档。createelement(_ type)；
返回初步的
}
附录(父项){
if(父类型=== string )父=文档。查询选择器(父)；
父母。appendchild(这个。elem)；
}
}
4、nodejs后台服务：
let http=require( http )；
let query string=require(查询字符串)；
让数据，
请求，
表示留数
//读取所有城市数据并解析为对象，同步读取。
设fs=require( fs )；
让所有城市信息=JSON。解析(fs。读取文件同步(./城市。JSON’))；
设服务器=http。createserver(监听器处理程序)；
server.listen(4010， 10.9.72.245 ，listenerDoneHandler)；
函数listenerHandler(_req，_res){
请求=_请求
res=_ res
res.writeHead(200，{
content-type“:”text/html；charset=utf-8 ，
访问控制允许起源: * ,
访问控制允许头: * ,
});
数据="";
req.on(数据，函数(_数据){
数据=_数据
})
req.on(end ，接收处理程序)；
}
函数接收处理程序(){
//控制台。log(allCityInfo)；
//根据请求头的全球资源定位器(统一资源定位器)解析接口类型
let type=req.url.trim().拆分(?)[0].替换(/\//g， )；
console.log(类型);
//根据请求头的全球资源定位器(统一资源定位器)解析传入的参数
如果(请求。方法。toupper case()=== GET ){
如果(请求。网址。包括( favicon。ico’))返回RES . end()；
else data=req.url.includes(？))) ?req.url.split(？)))[1] : ;
}
尝试{
data=JSON.parse(数据);
}接住{
数据=查询字符串。解析(数据)；
}
console.log(数据);
//根据接口类型查找数据。
let list={ }；
开关（类型){
案例“getProvince”:
列表。省=对象。密钥(allCityInfo)；
打破；
案例"获取城市":
列表。城市=对象。keys(allCityInfo[data。省])；
打破；
案例“getCounty”:
列表。县=所有城市信息[数据。省][数据。城市]；
打破；
}
console.log(列表);
资源写入(JSON。stringify(list))；
res.end()
}
函数listenerDoneHandler(){
console.log(开启服务成功);
}
5、服务端数据以json格式存储在city.json中，如下所示：
以上就是一文详解射流研究…实现三级联动菜单（附思路说明)的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。