下拉菜单。

2023-01-23 03:31| 来源: 网络整理| 查看: 265

需求通过三个下拉菜单实现省市区三级联动第一级下拉菜单为省级第二级下拉菜单为市级第三级下拉菜单为区级当点击第一季下拉菜单，第二级菜单内容会自动匹配当取消上一级菜单选项时，次一级选项会自动消失效果展示

下拉菜单

实现原理

给开始按钮绑定随机点名事件，停止按钮绑定随机点名的解除事件，通过给select添加change事件后再利用target可以得到精准的点击的元素的value值以辨别元素利用swich语句分别罗列当点击不同value值的元素后，下一级对应出现的选项

代码

js部分

//将市与区县信息分装到不同数组，便于渲染 var guangdongs=["广州市","深圳市","珠海市","汕头市","佛山市","韶关市","河源市","梅州市","惠州市","汕尾市","东莞市","中山市","江门市","阳江市","湛江市","茂名市","肇庆市","清远市","揭阳市","潮州市","云浮市"] var hainans=["海口市","三亚市","三沙市","儋州市"] var guangxis=["南宁市","柳州市","桂林市","梧州市","北海市","崇左市","来宾市","贺州市","玉林市","百色市","河池市","钦州市","防城港市","贵港市"] var jiangmens=["蓬江区","江海区","新会区","台山市","开平市","鹤山市","恩平市"] var guangzhous=["越秀区","海珠区","荔湾区","天河区","白云区","黄埔区","花都区","番禺区","南沙区","从化区","增城区"] var haikous=["秀英区","龙华区","琼山区","美兰区"] var chongzuos=["江州区","凭祥市","扶绥县","宁明县","龙州县","大新县","天等县"] //创建各城市与区的节点并将对应数组信息渲染到节点，并赋予value值 var clickGD=function(){ for(var i=0;iguangdongs[i]}` guangdong.value=i+1 $("#city").append(guangdong) } } var clickHN=function(){ for(var i=0;i for(var i=0;i for(var i=0;i for(var i=0;i for(var i=0;i for(var i=0;i var val=evt.target.value //当value值与case值相同，激发对应的点击事件函数 switch(val){ //取消选择的时候将下两级改回默认状态 case "0": city.length=1 area.length=1 break //在激发渲染下一级函数前清空前面点击后渲染的信息 case "1": city.length=1 area.length=1 //渲染市的函数 clickGD() //渲染区县的函数 choiceGD() break case "9": city.length=1 area.length=1 clickHN() choiceHN() break case "7": city.length=1 area.length=1 clickGX() choiceGX() break } }) //设置选择市后下一级出现的区县，用函数包装，在点击了上一级对应省份后才调用此函数，避免相同value值在不同省份混乱 var choiceGD=function(){ $("#city").change(function(evt){ var val=evt.target.value switch(val){ case "0": area.length=1 break case "1": area.length=1 clickGZ() break case "13": area.length=1 clickJM() break } }) } var choiceHN=function(){ $("#city").change(function(evt){ var val=evt.target.value switch(val){ case "0": area.length=1 break case "1": area.length=1 clickHK() break } }) } var choiceGX=function(){ $("#city").change(function(evt){ var val=evt.target.value switch(val){ case "0": area.length=1 break case "6": area.length=1 clickCZ() break } }) }

完整代码

Document select{ width: 150px; text-align: center; } 请选择地区：请选择省份广东省安徽省北京重庆福建省甘肃省广西壮族自治区贵州省海南省河北省河南省黑龙江省湖北省湖南省吉林省江苏省辽宁省内蒙古自治区宁夏回族自治区青海省山东省山西省陕西省上海四川省天津西藏自治区新疆维吾尔自治区云南省浙江省江西省中国香港中国澳门中国台湾请选择城市请选择区县 //将市与区县信息分装到不同数组，便于渲染 var guangdongs=["广州市","深圳市","珠海市","汕头市","佛山市","韶关市","河源市","梅州市","惠州市","汕尾市","东莞市","中山市","江门市","阳江市","湛江市","茂名市","肇庆市","清远市","揭阳市","潮州市","云浮市"] var hainans=["海口市","三亚市","三沙市","儋州市"] var guangxis=["南宁市","柳州市","桂林市","梧州市","北海市","崇左市","来宾市","贺州市","玉林市","百色市","河池市","钦州市","防城港市","贵港市"] var jiangmens=["蓬江区","江海区","新会区","台山市","开平市","鹤山市","恩平市"] var guangzhous=["越秀区","海珠区","荔湾区","天河区","白云区","黄埔区","花都区","番禺区","南沙区","从化区","增城区"] var haikous=["秀英区","龙华区","琼山区","美兰区"] var chongzuos=["江州区","凭祥市","扶绥县","宁明县","龙州县","大新县","天等县"] //创建各城市与区的节点并将对应数组信息渲染到节点，并赋予value值 var clickGD=function(){ for(var i=0;iguangdongs[i]}` guangdong.value=i+1 $("#city").append(guangdong) } } var clickHN=function(){ for(var i=0;i for(var i=0;i for(var i=0;i for(var i=0;i for(var i=0;i for(var i=0;i var val=evt.target.value //当value值与case值相同，激发对应的点击事件函数 switch(val){ //取消选择的时候将下两级改回默认状态 case "0": city.length=1 area.length=1 break //在激发渲染下一级函数前清空前面点击后渲染的信息 case "1": city.length=1 area.length=1 //渲染市的函数 clickGD() //渲染区县的函数 choiceGD() break case "9": city.length=1 area.length=1 clickHN() choiceHN() break case "7": city.length=1 area.length=1 clickGX() choiceGX() break } }) //设置选择市后下一级出现的区县，用函数包装，在点击了上一级对应省份后才调用此函数，避免相同value值在不同省份混乱 var choiceGD=function(){ $("#city").change(function(evt){ var val=evt.target.value switch(val){ case "0": area.length=1 break case "1": area.length=1 clickGZ() break case "13": area.length=1 clickJM() break } }) } var choiceHN=function(){ $("#city").change(function(evt){ var val=evt.target.value switch(val){ case "0": area.length=1 break case "1": area.length=1 clickHK() break } }) } var choiceGX=function(){ $("#city").change(function(evt){ var val=evt.target.value switch(val){ case "0": area.length=1 break case "6": area.length=1 clickCZ() break } }) } ```

【本文地址】

公司简介

联系我们