备份一下bsc年度分组的二级联动

html body{
    background-color: rgba(16, 14, 4, 0.03);
}
.search{
    width:250px;
    height:44px;
    margin:100px auto;
    background-color: white;
}
.citySelect{
    width:100px;
    height:42px;
    position: relative;
    cursor: pointer;
    /*padding-left: 15px;*/

}
.cityName{
    display: block;
    padding-top: 10px;
    padding-left: 10px;
    width:200px;
    font-size: 13px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}
/*.iconDown{
    width:16px;
    height:16px;
    position:absolute;
    top:15px;
    right:7px;
     background-image: url("../images/icons.png");
    background-repeat: no-repeat;
    background-position: 0 -2044px;
    cursor:pointer;
    display: inline-block;
}*/
.dropUl{
    list-style: none;
    height:300px;
    overflow: scroll;
    padding:0;
}
.dropUl::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 0;
}
.dropUl::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
    background: #d1d4db;
}
.dropUl::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: none;
    border-radius: 0px;
    /*background: #EDEDED;*/
}
.dropProvUl li{
    width: 120px;
    height:50px;
    padding-left: 20px;
    color:#9fa3b0;
    line-height: 50px;
    background-color: white;
    cursor: pointer;
}
.dropProvUl li:hover{
    background-color: #f1f3f6;
}
.dropCityUl{
    margin-left: 5px;
    background-color:white;
}
.dropCityUl li{
    width: 120px;
    height:50px;
    padding-left: 20px;
    color:#9fa3b0;
    line-height: 50px;
    cursor: pointer;

}
.dropCityUl li:hover{
    background-color:#f1f3f6;
}
.dropDown div{
    width:120px;
    height:300px;
    float: left;
    display: none;
}

js:

$(function(){
    addArray();
    //console.log(arr2);
    //加载省级列表
    for(let i=0;i<arr.length;i++) {
        $('.dropProvUl').append("<li class='dropProvLi'>" + arr[i] + "</li>");
    }
    //点击选择城市时，先隐藏省级市级选择块
    $('.citySelect').on('click',function(){
        //$('.dropDown').toggle();
        $('.dropCity').css('display',"none");
        $('.dropProv').toggle();
        //点击省份时，自动选择省会城市
        $('.dropProvLi').on('click',function(){
            $('.cityName').text( arr2[$(this).index()][0]);
            $('.dropDown div').css("display","none");
        });
        //给省级列表添加mouseover事件
        $('.dropProvLi').on('mouseover',function(){
            var _this = this;
            $('.dropCity').css("display","block");
            $('.dropProvLi').css("background-color","white");
            $('.dropCityUl').empty();
            $(this).css("background-color","#f1f3f6");
            //加载城市列表
            for(let j=0;j<arr2[$(this).index()].length;j++){
                $('.dropCityUl').append("<li class='dropCityLi'>"+arr2[$(this).index()][j]+"</li>");
            }
            //选择城市
            $('.dropCityLi').on("click", function () {
                //console.log($(this).text());
                $('.cityName').text($(_this).text()+"年"+$(this).text());
                $('.dropDown div').css("display","none");
                var jQuery = $(".cityName").text();
                console.log("aaa",jQuery);
            });
        });
    });

});
//把市级添加到arr2中对应的省级
function addArray(){
    arr=[];
    arr2=[];
    $.ajax({
        url : "/year",
        type : "get",
        dataType : "json",
        async: false,
        success: function (json) {
            for (var i = 0; i < json.length; i++) {
                arr.push(json[i]);
                arr2.push(json[i]);
            }
        }
    });
    console.log("arra:", arr);
    console.log("arrb", arr2);
    function addTo(id,iArray){
        arr2[id] = [];
        for(let i=0;i<iArray.length;i++){
            arr2[id][i]=iArray[i];
        }
    }
    for (var i = 0; i < arr.length; i++) {
        $.ajax({
            url : "/bsc",
            type : "get",
            data : {"year": arr[i]},
            dataType : "json",
            async: false,
            success: function (json) {
                var g = [];
                for (var j = 0; j < json.length; j++) {
                    g.push(json[j].leaderName+"组");
                    console.log("json", j, ":", json[j].bscId);
                }
                addTo(i, g);
            }
        });
    }
};

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>城市选择</title>
    <script type="text/javascript" src="resources/jquery.3.3.1.min.js"></script>
    <script type="text/javascript" src="resources/citySelect.js"></script>
    <link rel="stylesheet" href="resources/citySelect.css">
</head>
<body>
<div class="search">
    <div class="citySelect">
        <span class="cityName"></span>
        <i class="iconDown"></i>
        <i class="line"></i>
    </div>

    <div class="dropDown">
        <div class="dropProv">
            <ul class="dropProvUl dropUl"></ul>
        </div>
        <div class="dropCity">
            <ul class="dropCityUl dropUl"></ul>
        </div>
    </div>
</div>
</body>
</html>

标签：function,color,备份,height,json,分组,arr2,background,bsc
来源： https://blog.csdn.net/weixin_44035040/article/details/115287438