案例：动态下拉菜单
景子安
需求：
通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
实现原理：
1、因为无法单独给option加click事件，所以通过给select添加change事件后再利用target可以得到精准的点击的元素的value值以辨别元素
2、利用swich语句分别罗列当点击不同value值的元素后，下一级对应出现的选项
3、在每次调用选项渲染的函数前利用将select节点的长度改为1只剩下默认选项“请选择xxx”
4、因为市的value值都为顺序数字，防止因为value值相同而造成点击不同省后再点击市会出现相同区县的情况，将选择市的value值匹配switch语句分装成不同函数后放进对应省份的case情况中
实现效果：
QQ录屏20230116101452
此代码只设置了广东=>广州、广东=>江门、海南=>海口、广西=>崇左这四条路径的信息渲染函数
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
select{
width: 150px;
text-align: center;
}
</style>
</head>
<body>
请选择地区：
<select id="province">
<option selected value="0">请选择省份</option>
<option value="1">广东省</option>
<option value="2">安徽省</option>
<option value="3">北京</option>
<option value="4">重庆</option>
<option value="5">福建省</option>
<option value="6">甘肃省</option>
<option value="7">广西壮族自治区</option>
<option value="8">贵州省</option>
<option value="9">海南省</option>
<option value="10">河北省</option>
<option value="12">河南省</option>
<option value="13">黑龙江省</option>
<option value="14">湖北省</option>
<option value="15">湖南省</option>
<option value="16">吉林省</option>
<option value="17">江苏省</option>
<option value="18">辽宁省</option>
<option value="19">内蒙古自治区</option>
<option value="20">宁夏回族自治区</option>
<option value="21">青海省</option>
<option value="22">山东省</option>
<option value="23">山西省</option>
<option value="24">陕西省</option>
<option value="25">上海</option>
<option value="26">四川省</option>
<option value="27">天津</option>
<option value="28">西藏自治区</option>
<option value="29">新疆维吾尔自治区</option>
<option value="30">云南省</option>
<option value="31">浙江省</option>
<option value="32">江西省</option>
<option value="33">中国香港</option>
<option value="34">中国澳门</option>
<option value="35">中国台湾</option>
</select>
<select id="city">
<option selected value="0">请选择城市</option>
</select>
<select id="area">
<option selected value="0">请选择区县</option>
</select>
<script>
//将市与区县信息分装到不同数组，便于渲染
var guangdongs=["广州市","深圳市","珠海市","汕头市","佛山市","韶关市","河源市","梅州市","惠州市","汕尾市","东莞市","中山市","江门市","阳江市","湛江市","茂名市","肇庆市","清远市","揭阳市","潮州市","云浮市"]
var hainans=["海口市","三亚市","三沙市","儋州市"]
var guangxis=["南宁市","柳州市","桂林市","梧州市","北海市","崇左市","来宾市","贺州市","玉林市","百色市","河池市","钦州市","防城港市","贵港市"]
var jiangmens=["蓬江区","江海区","新会区","台山市","开平市","鹤山市","恩平市"]
var guangzhous=["越秀区","海珠区","荔湾区","天河区","白云区","黄埔区","花都区","番禺区","南沙区","从化区","增城区"]
var haikous=["秀英区","龙华区","琼山区","美兰区"]
var chongzuos=["江州区","凭祥市","扶绥县","宁明县","龙州县","大新县","天等县"]
//创建各城市与区的节点并将对应数组信息渲染到节点，并赋予value值
var clickGD=function(){
for(var i=0;i<guangdongs.length;i++){
var guangdong=document.createElement("option")
guangdong.innerHTML=`${guangdongs[i]}`
guangdong.value=i+1
$("#city").append(guangdong)
}
}
var clickHN=function(){
for(var i=0;i<hainans.length;i++){
var hainan=document.createElement("option")
hainan.innerHTML=hainans[i]
hainan.value=i+1
$("#city").append(hainan)
}
}
var clickGX=function(){
for(var i=0;i<guangxis.length;i++){
var guangxi=document.createElement("option")
guangxi.innerHTML=guangxis[i]
guangxi.value=i+1
$("#city").append(guangxi)
}
}
var clickJM=function(){
for(var i=0;i<jiangmens.length;i++){
var jiangmen=document.createElement("option")
jiangmen.innerHTML=jiangmens[i]
jiangmen.value=i+1
$("#area").append(jiangmen)
}
}
var clickGZ=function(){
for(var i=0;i<guangzhous.length;i++){
var guangzhou=document.createElement("option")
guangzhou.innerHTML=guangzhous[i]
guangzhou.value=i+1
$("#area").append(guangzhou)
}
}
var clickHK=function(){
for(var i=0;i<haikous.length;i++){
var haikou=document.createElement("option")
haikou.innerHTML=haikous[i]
haikou.value=i+1
$("#area").append(haikou)
}
}
var clickCZ=function(){
for(var i=0;i<chongzuos.length;i++){
var chongzuo=document.createElement("option")
chongzuo.innerHTML=chongzuos[i]
chongzuo.value=i+1
$("#area").append(chongzuo)
}
}
//设置选择省后下一级出现的市
$("#province").change(function(evt){
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
}
})
}
</script>
</body>
</html>```
类似资料：