案例：动态下拉菜单

IT噜噜

已于 2023-01-17 17:25:50 修改

阅读量282

点赞数

文章标签：前端 javascript html css

于 2023-01-16 10:34:48 首次发布

本文链接：https://blog.csdn.net/Ghlys/article/details/128701033

版权

需求：
通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。
实现原理：
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>```