标签：function color 备份 height json 分组 arr2 background 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。