究极超级详细的级联菜单

妮可辣岛芭·

于 2021-12-06 01:58:00 发布

阅读量381

点赞数

分类专栏：我爱学习文章标签： HTML jQuery 级联菜单动态加载事件监听

本文链接：https://blog.csdn.net/wdnmdq_66/article/details/121738854

版权

我爱学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>级联菜单</title>
    <script src="../../jquery-3.6.0.js"></script>
</head>
<body>
<select name="selProvince" id="selProvince">
    <option value="">---请选择省份---</option>
</select>
<select name="selCity" id="selCity">
    <option value="">---请选择市---</option>
</select>
<select name="selCountry" id="selCountry">
    <option value="">---请选择县---</option>
</select>
</body>
</html>

jQuery代码

<script>
    var iNum1;
    var iNum2;
    var aProvince = ['湖省','淇省','浚省'];
    var aCity =[
        ['武汉','黄冈','荆门'],
        ['南京','无锡','镇江'],
        ['合肥','安庆','黄山']
    ];//注意这个是二维数组
    var aCountry =[
        [['武汉1','武汉2'], ['黄冈1','黄冈2'], ['荆门1','荆门2']],
        [['南京1','南京2'], ['无锡1','无锡2'], ['镇江1','镇江2']],
        [['合肥1','合肥2'], ['安庆1','安庆2'], ['黄山1','黄山2']]
    ];//注意这是二维数组
    $(function(){
        //   for循环省会的长度
        for(var i=0;i<aProvince.length;i++){
            //省份            追加省份     option里面通过省份的下标放入省份
            $('#selProvince').append('<option>'+aProvince[i]+'</option>');
        }
        // 选择省份         当变化触发事件
            $('#selProvince').change(function () {
                //市菜单     的被选元素的所有 儿子辈的
                // not从匹配元素集合中删除不包括这个的元素的其他元素。
                $('#selCity').children().not(':eq(0)').remove();
                //县菜单
                // not从匹配元素集合中删除不包括这个的元素的其他元素。
                $('#selCountry').children().not(':eq(0)').remove();
                //因为      1在用户里是开头      0是在数组里的开头
                iNum1 = $(this).children('option:selected').index()
                //比如选择的是湖南
                //现在iNne 就是1
                //  需要减一才能对应上数组
                var aaCity = aCity[iNum1-1]
                //aCity里面的数组
                // ['武汉','黄冈','荆门'],0
                // ['南京','无锡','镇江'],1
                // ['合肥','安庆','黄山']2
                // aaCity = aCity[0]
                // aaCity = ['武汉','黄冈','荆门']
                //        循环aaCity的长度 就是
                //  var j=0;j<aaCity.3;j++
                for(var j=0;j<aaCity.length;j++){
                    //给市级菜单  里面循环追加  ['武汉','黄冈','荆门']
                    //那么页面上就是    请选择市  武汉 , 黄冈 , 荆门
                    //对应的下标是      0         1     2     3
                     $('#selCity').append('<option>' + aaCity[j] + '</option>');
                }
            });
        //  选择市        当 变化触发事件
        $('#selCity').change(function () {

            $('#selCountry').children().not(':eq(0)').remove();
            //       获取被选中市级的下标
            //比如选择的是武汉
            //那么页面上就是    请选择市  武汉 , 黄冈 , 荆门
            //对应的下标是      0         1     2     3
            iNum2 = $(this).children('option:selected').index();
            // iNum2  = 1
            //因为上面选湖南的时候 iNmu = 1
            var aaCountry = aCountry[iNum1-1][iNum2-1];
            //    新变量   等于  二维数组里面[1-1][1-1]
            //aaCountry = aCountry[0][0]
            // var aCountry =[
            //     [['武汉1','武汉2'], ['黄冈1','黄冈2'], ['荆门1','荆门2']],
            //      [0][0]                 [0] [1]         [0][2]
            //     [['南京1','南京2'], ['无锡1','无锡2'], ['镇江1','镇江2']],
            //       [1][0]                  [1][1]           [1] [2]
            //     [['合肥1','合肥2'], ['安庆1','安庆2'], ['黄山1','黄山2']]
            //        [2] [0]               [2] [1]           [2] [2]
            // ];
            //    aaCountry = aCountry['武汉1','武汉2']
            //    aaCountry =  ['武汉1','武汉2']
            //    循环     aaCount的长度
            for(var k=0;k<aaCountry.length;k++){
                //然后给空白县       循环追加      ['武汉1','武汉2']
                $('#selCountry').append('<option>'+aaCountry[k]+'</option>');
            }
        });
    });
</script>

效果图