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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.10.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读