什么是级联菜单以及级联菜单的效果图

FeiyuN_12

于 2021-12-02 20:02:14 发布

阅读量4k

点赞数 1

文章标签： css jquery 前端

本文链接：https://blog.csdn.net/FeiyuN_12/article/details/121684869

版权

级联菜单是指有多个层级的菜单, 每个级别的菜单,有与之相关联的子级菜单。

例如: 菜单1 1. 子菜单a 2. 子菜单b 3. 子菜单c 4. 菜单2 1. 子菜单d 2. 子菜单e 3. 子菜单f 4. 菜单3 1. 子菜单g 2. 子菜单h

代码如下：

css:

<body>
<select id="list1">
    <option>--请选项--</option>
</select>


<select id="list2">
    <option>--请选项--</option>
</select>


<select id="list3">
    <option>--请选项--</option>
</select>


</body>

js:

 <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" >
        $(function() {
            let sheng=['河南省','广东省','福建省'];
            let shi=[['信阳市','郑州市','洛阳市'],['广州市','深圳市','佛山市'],['三明市','福州市','厦门市']]
            let xian=[
                [['光山县','息县','罗山县'],['二七区','新郑区','中原区'],['洛龙区','新安县','涧西区']],
                [['白云区','天河区','花都区'],['福田区','南山区','罗湖区'],['南海区','高明区','顺德区']],
                [['明溪县','宁化县','沙县'],['罗源县','连江县','永清县'],['思明区','集美区','同安区']]
            ];
            var one;
            var two;
            var str;
            var stt;
            for(var i=0;i<sheng.length;i++)
            {
                $("#list1").append('<option>'+sheng[i]+'</option>');
            }


            $("#list1").change(function()//对省级下拉框进行监听
                {
                    $("#list2").children("option").not(":eq(0)").remove();//每次选择省，清除市级下拉框
                    $("#list3").children("option").not(":eq(0)").remove();//每次选择省，清除县级级下拉框
                    one=$(this).children("option:selected").index();  //获取选中选项的索引值
                    str=shi[one-1];//根据索引获取相对的市级
                    for(var j=0;j<str.length;j++)//利用循环对市级下拉框进行赋值
                    {
                        $("#list2").append('<option>'+str[j]+'</option>');
                    }
                }
            );


            $("#list2").change(function()
                {
                    $("#list3").children("option").not(":eq(0)").remove();
                    two=$(this).children("option:selected").index();//获取选中的市级选项的索引值
                            //alert(one);
                            //alert(two);
                    stt=xian[one-1][two-1];//在县级数组中找到相应的县或区
                    for(var z=0;z<stt.length;z++)
                    {
                        $("#list3").append('<option>'+stt[z]+'</option>');
                    }
                }
            );


        });
    </script>

FeiyuN_12

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
什么是级联菜单以及级联菜单的效果图

级联菜单是指有多个层级的菜单, 每个级别的菜单,有与之相关联的子级菜单。例如: 菜单1 1. 子菜单a 2. 子菜单b 3. 子菜单c 4. 菜单2 1. 子菜单d 2. 子菜单e 3. 子菜单f 4. 菜单3 1. 子菜单g 2. 子菜单hcss:<body><select id="list1"> <option>--请选项--</option></select><select id="list2...
复制链接

扫一扫