20171018

字母点击实现城市选择案例

1.样式

<script src="js/citydata.js"></script>//获得城市信息接口
    <style>
        *{margin-left: 0;padding: 0}
        .box{
            margin: 100px auto;
            border: 1px solid #ccc;
            width: 600px;
            /*text-align: center;*/
        }
        ul{
            list-style: none;
        }
        #hotcity{
            padding: 10px;
           overflow: hidden;
            border-bottom: 1px solid #ccc;
        }
        #hotcity>li{
            float: left;
            width: 60px;
            line-height: 30px;
            text-align: center;
        }
        #hotcity>li:hover{
            color: skyblue;
        }
        #select{
            padding: 10px;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
        }
        #select>li{
            float: left;
            width: 60px;
            line-height: 30px;
            cursor: pointer;
            text-align: center;
        }
        #select>li:hover{
            color: skyblue;
        }
        #item{
            padding: 10px;
        }
        #item span{
            display: inline-block;
            text-align: left;
            line-height: 30px;
            margin-right: 10px;

        }
    </style>

2.结构

<body>
    <div class="box">
        <ul id="hotcity"></ul>
        <ul id="select"></ul>
        <div id="item"></div>
    </div>
</body>

3.js

<script>
    var hotcity = document.getElementById("hotcity");
    var select = document.getElementById("select");
    var item  = document.getElementById("item");
    //读取热门城市数据
    for (var i=0 ;i<obj.hotList.length;i++){
        var li = document.createElement("li");
        li.innerHTML = "<span>"+obj.hotList[i][0]+"</span>";
        hotcity.appendChild(li);
    }
    //创建字母列表
    for(var i =65;i<91;i++){
        var code = String.fromCharCode(i);
        var liage = document.createElement("li");
        liage.innerText = code;
        select.appendChild(liage);
    }
    function Check(which) {
        for(var i= 0;i<obj.cityList.length;i++){
            if(which===obj.cityList[i][1].toUpperCase()){
                var spantage = document.createElement("span");
                spantage.innerHTML = obj.cityList[i][0];
                item.appendChild(spantage);
            }
        }
    }
    var litages = select.getElementsByTagName("li");
    litages[0].onclick = function () {
        for(var i= 0;i<obj.cityList.length;i++){
//            console.log(obj.cityList[i][1].charAt(0).)
            if(obj.cityList[i][1].charAt(0).toUpperCase()===litages[0].innerText){
                var spantage = document.createElement("span");
                spantage.innerHTML = obj.cityList[i][0];
                item.appendChild(spantage);
            }
        }
    }

for (var m = 0;m<litages.length;m++){
        litages[m].onclick = function () {
            item.innerHTML = "";
            for(var i= 0;i<obj.cityList.length;i++){
//            console.log(obj.cityList[i][1].charAt(0).)
                if(obj.cityList[i][1].charAt(0).toUpperCase()===this.innerText){
                    var spantage = document.createElement("span");
                    spantage.innerHTML = obj.cityList[i][0];
                    item.appendChild(spantage);
                }
            }
        }
}
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 20171024

    天天_哥
  • 20171020

    天天_哥
  • 切换

    天天_哥
  • js实现自定义滚动条

    星辉
  • Oracle RAC 连接到指定实例

            在某些特定的情形下,有时候需要从客户端连接到RAC中指定的实例,而不是由客户端Load_balance来动态选择或者是通过服务器端的监听器根据负...

    Leshami
  • JS-鼠标跟随块(一个小圆点跟着鼠标跑)

    xing.org1^
  • 《从案例中学习JavaScript》之实现对话效果(3)

    剽悍一小兔
  • 饿了么丝滑无缝过度搜索栏的实现

    用户1907613
  • 基于逻辑回归的利用欠采样处理类别不平衡的

    这个信用卡欺诈数据集是从kaggle上下载的,网址(https://www.kaggle.com/mlg-ulb/creditcardfraud#creditc...

    py3study

扫码关注云+社区

领取腾讯云代金券