备份一下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>
上一篇:面试题: js实现合并两个已经排好序的数组 (es6 方法 )


下一篇:二维数组问题:从键盘输入二维数组行列值,往数组中随机填充0-50之间的数字,二维数组中数据先行后列方式从大到小的顺序排列后以矩阵形式输出,并且计算两条对角线的数字之和。