h5手机端下拉选择城市
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>html5手机端城市下拉选择代码</title>
<style type="text/css">
body{background:#efecec;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0);max-width:
600px;margin: 0 auto;}
body,div,dl,dt,dd,ul,li,form,input,button,h1,h2,h3,h4,h5,h6,p{margin: 0 auto;padding:0;font-family:"微软雅黑";}
html{overflow-x:hidden;-webkit-text-size-adjust:none;}
ul,li,dl,dt,dd{display:block;list-style:none;}
img{border:0;max-width:100%;height: auto;}
.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;overflow:hidden;visibility:hidden;width:0;height:0;}
a{text-decoration:none;outline:none;}
.fl{float:left;}
.fr{float:right;}
.none{display:none;}
@charset "utf-8";
.loan_jm1{width:94%;margin:0 auto;}
.loan_jm_spa1{width:39%;height:40px;line-height:40px;font-size:1em;color:#666;display:block;float:left;}
.loan_jm_l1{margin-top:10px;margin-bottom:15px;height:40px;}
.wbk_srn{width:57%;height:40px;border:1px solid
#ccc;background:#FFF;float:left;padding-left:3%;line-height:40px;color:#ADADAD;
font-size:1.1em; background-size:45%;background-position:center;background:#fff;}
.wbk_srn b{width:30px;height:40px;border:1px solid
#ccc;background:#FFF;float:left;padding-left:3%;line-height:40px;color:#ADADAD;
font-size:1.1em; background-size:45%;background-position:center;background:url(../img/xl.png) right 5px no-repeat;}
/*城市弹层*/
.IGN_CITY_CONTAINER{width:100%;position:absolute;top:56px;left:0;background-color:#ffffff;z-index:9999;display:none;}
.IGN_CITY_LETTER{width:5%;overflow:hidden;line-height:32px;font-size:16px;position:fixed;top:20px;right:10px;text-align:center;}
.IGN_CITY_LETTER ul{list-style-type:none;}
.IGN_CITY_LETTER ul li a{text-decoration:none;}
.city{width:90%;overflow:hidden;padding:20px;}
.city-list{width:100%;overflow:hidden;}
.city-list
.city-letter{color:#6e6e6e;font-size:16px;display:inline-block;padding-top:15px;padding-bottom:5px;border-bottom:1px
solid #e8ecf1;width:100%;}
.city-list p{color:#afafaf;width:95%;height:50px;line-height:50px;border-bottom:1px solid #e8ecf1;cursor:pointer;}
</style>
<script type="text/javascript" src="/collect/reference/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/collect/reference/js/sort/zepto.js"></script>
<script type="text/javascript">
var ex = {
cityList:function(value){
var city_lett = {};
if(value == "A"){//首字母 -A
city_lett =
{"210300":"鞍山市","152900":"阿拉善盟","340800":"安庆市","410500":"安阳市","542500":"阿里地区","610900":"安康市","520400":"安顺市","513200":"阿坝藏族羌族自治州","659002":"阿拉尔市","652900":"阿克苏地区","820100":"澳门特别行政区","654300":"阿勒泰地区"};
}else if(value == "B"){//首字母 -B
city_lett =
{"220800":"白城市","150200":"包头市","150800":"巴彦淖尔市","130600":"保定市","210500":"本溪市","220600":"白山市","341600":"亳州市","340300":"蚌埠市","371600":"滨州市","620400":"白银市","610300":"宝鸡市","530500":"保山市","469030":"白沙黎族自治县","451000":"百色市","522401":"毕节市","450500":"北海市","511900":"巴中市","469035":"保亭黎族苗族自治县","652800":"巴音郭楞蒙古自治州","652700":"博尔塔拉蒙古自治州","110100":"北京市"};
}else if(value == "C"){//首字母 -C
city_lett =
{"140400":"长治市","130900":"沧州市","320400":"常州市","330282":"慈溪市","320581":"常熟市","130800":"承德市","150400":"赤峰市","220100":"长春市","431000":"郴州市","430100":"长沙市","341100":"滁州市","430700":"常德市","341400":"巢湖市","341700":"池州市","469027":"澄迈县","451400":"崇左市","469031":"昌江黎族自治县","532300":"楚雄彝族自治州","445100":"潮州市","500100":"重庆市","510100":"成都市","542100":"昌都地区","652300":"昌吉回族自治州"};
}else if(value == "D"){//首字母 -D
city_lett =
{"232700":"大兴安岭地区","140200":"大同市","230600":"大庆市","321181":"丹阳市","210200":"大连市","210600":"丹东市","370500":"东营市","371400":"德州市","511700":"达州市","532900":"大理白族自治州","469003":"儋州市","469025":"定安县","533400":"迪庆藏族自治州","510600":"德阳市","469007":"东方市","533100":"德宏傣族景颇族自治州","441900":"东莞市","621100":"定西市"};
}else if(value == "E"){//首字母 -E
city_lett = {"150600":"鄂尔多斯市","420700":"鄂州市","422800":"恩施土家族苗族自治州"};
}else if(value == "F"){//首字母 -F
city_lett =
{"210900":"阜新市","210400":"抚顺市","350181":"福清市","341200":"阜阳市","370983":"肥城市","361000":"抚州市","350100":"福州市","440600":"佛山市","450600":"防城港市"};
}else if(value == "G"){//首字母 -G
city_lett =
{"440100":"广州市","360700":"赣州市","510800":"广元市","511600":"广安市","450300":"桂林市","450800":"贵港市","520100":"贵阳市","513300":"甘孜藏族自治州","623000":"甘南藏族自治州","640400":"固原市","632600":"果洛藏族自治州"};
}else if(value == "H"){//首字母 -H
city_lett =
{"231100":"黑河市","211400":"葫芦岛市","330481":"海宁市","320800":"淮安市","131100":"衡水市","150100":"呼和浩特市","330500":"湖州市","230400":"鹤岗市","150700":"呼伦贝尔市","230100":"哈尔滨市","130400":"邯郸市","330100":"杭州市","410600":"鹤壁市","371700":"菏泽市","420200":"黄石市","431200":"怀化市","340600":"淮北市","421100":"黄冈市","430400":"衡阳市","340100":"合肥市","340400":"淮南市","341000":"黄山市","451200":"河池市","460100":"海口市","441600":"河源市","532500":"红河哈尼族彝族自治州","441300":"惠州市","610700":"汉中市","451100":"贺州市","632800":"海西蒙古族藏族自治州","632100":"海东市","632300":"黄南藏族自治州","652200":"哈密地区","632200":"海北藏族自治州","653200":"和田地区","632500":"海南藏族自治州"};
}else if(value == "I"){//首字母 -I
}else if(value == "J"){//首字母 -J
city_lett =
{"210700":"锦州市","330700":"金华市","140700":"晋中市","320281":"江阴市","220200":"吉林市","230800":"佳木斯市","230300":"鸡西市","330400":"嘉兴市","140500":"晋城市","350582":"晋江市","370282":"即墨市","360800":"吉安市","370100":"济南市","420800":"荆门市","410800":"焦作市","370800":"济宁市","410881":"济源市","421000":"荆州市","360400":"九江市","360200":"景德镇市","445200":"揭阳市","620300":"金昌市","440700":"江门市","620200":"嘉峪关市","620900":"酒泉市"};
}else if(value == "K"){//首字母 -K
city_lett =
{"320583":"昆山市","410200":"开封市","530100":"昆明市","650200":"克拉玛依市","653000":"克孜勒苏柯尔克孜自治州","653100":"喀什地区"};
}else if(value == "L"){//首字母 -L
city_lett =
{"141000":"临汾市","131000":"廊坊市","211000":"辽阳市","220400":"辽源市","141100":"吕梁市","320700":"连云港市","371200":"莱芜市","411100":"漯河市","331100":"丽水市","341500":"六安市","431300":"娄底市","350800":"龙岩市","370681":"龙口市","371300":"临沂市","410300":"洛阳市","371500":"聊城市","530700":"丽江市","451300":"来宾市","510500":"泸州市","530900":"临沧市","469033":"乐东黎族自治县","511100":"乐山市","620100":"兰州市","450200":"柳州市","513400":"凉山彝族自治州","469034":"陵水黎族自治县","542600":"林芝地区","469028":"临高县","540100":"拉萨市","520200":"六盘水市","621200":"陇南市","622900":"临夏回族自治州"};
}else if(value == "M"){//首字母 -M
city_lett =
{"231000":"牡丹江市","340500":"马鞍山市","510700":"绵阳市","511400":"眉山市","440900":"茂名市","441400":"梅州市"};
}else if(value == "N"){//首字母 -N
city_lett =
{"320100":"南京市","330200":"宁波市","320600":"南通市","360100":"南昌市","411300":"南阳市","350700":"南平市","350900":"宁德市","350583":"南安市","542400":"那曲地区","450100":"南宁市","511300":"南充市","511000":"内江市","533300":"怒江傈僳族自治州"};
}else if(value == "O"){//首字母 -O
}else if(value == "P"){//首字母 -P
city_lett =
{"211100":"盘锦市","360300":"萍乡市","410400":"平顶山市","410900":"濮阳市","350300":"莆田市","510400":"攀枝花市","530800":"普洱市","620800":"平凉市"};
}else if(value == "Q"){//首字母 -Q
city_lett =
{"130300":"秦皇岛市","230200":"齐齐哈尔市","230900":"七台河市","350500":"泉州市","429005":"潜江市","370200":"青岛市","330800":"衢州市","441800":"清远市","522700":"黔南布依族苗族自治州","450700":"钦州市","530300":"曲靖市","522300":"黔西南布依族苗族自治州","621000":"庆阳市","522600":"黔东南苗族侗族自治州","469002":"琼海市","469036":"琼中黎族苗族自治县"};
}else if(value == "R"){//首字母 -R
city_lett = {"320682":"如皋市","371082":"荣成市","371100":"日照市","542301":"日喀则市"};
}else if(value == "S"){//首字母 -S
city_lett =
{"220300":"四平市","231200":"绥化市","220700":"松原市","320500":"苏州市","310100":"上海市","321300":"宿迁市","330600":"绍兴市","140600":"朔州市","230500":"双鸭山市","210100":"沈阳市","330682":"上虞市","130100":"石家庄市","440500":"汕头市","350400":"三明市","429021":"神农架林区","361100":"上饶市","411400":"商丘市","421300":"随州市","341300":"宿州市","411200":"三门峡市","420300":"十堰市","440300":"深圳市","430500":"邵阳市","440200":"韶关市","441500":"汕尾市","510900":"遂宁市","611000":"商洛市","542200":"山南地区","460200":"三亚市","640200":"石嘴山市","659001":"石河子市"};
}else if(value == "T"){//首字母 -T
city_lett =
{"140100":"太原市","211200":"铁岭市","220500":"通化市","130200":"唐山市","320585":"太仓市","120100":"天津市","321200":"泰州市","150500":"通辽市","331000":"台州市","370900":"泰安市","429006":"天门市","340700":"铜陵市","522201":"铜仁市","469026":"屯昌县","610200":"铜川市","620500":"天水市","654200":"塔城地区","659003":"图木舒克市","652100":"吐鲁番地区","710100":"台湾"};
}else if(value == "U"){//首字母 -U
}else if(value == "V"){//首字母 -V
}else if(value == "W"){//首字母 -W
city_lett =
{"330300":"温州市","320200":"无锡市","150900":"乌兰察布市","150300":"乌海市","340200":"芜湖市","420100":"武汉市","370700":"潍坊市","371000":"威海市","469006":"万宁市","610500":"渭南市","469005":"文昌市","469001":"五指山市","620600":"武威市","450400":"梧州市","532600":"文山壮族苗族自治州","659004":"五家渠市","640300":"吴忠市","650100":"乌鲁木齐市"};
}else if(value == "X"){//首字母 -X
city_lett =
{"140900":"忻州市","152500":"锡林郭勒盟","130500":"邢台市","152200":"兴安盟","320300":"徐州市","410700":"新乡市","420600":"襄阳市","360500":"新余市","411500":"信阳市","429004":"仙桃市","411000":"许昌市","430300":"湘潭市","350200":"厦门市","341800":"宣城市","420900":"孝感市","421200":"咸宁市","433100":"湘西土家族苗族自治州","610100":"西安市","610400":"咸阳市","532800":"西双版纳傣族自治州","630100":"西宁市","810100":"香港特别行政区"};
}else if(value == "Y"){//首字母 -Y
city_lett =
{"320282":"宜兴市","222400":"延边朝鲜族自治州","321000":"扬州市","140800":"运城市","320900":"盐城市","140300":"阳泉市","330281":"余姚市","230700":"伊春市","210800":"营口市","370600":"烟台市","420500":"宜昌市","430600":"岳阳市","360900":"宜春市","430900":"益阳市","330782":"义乌市","360600":"鹰潭市","431100":"永州市","450900":"玉林市","511800":"雅安市","530400":"玉溪市","441700":"阳江市","610800":"榆林市","511500":"宜宾市","445300":"云浮市","610600":"延安市","654000":"伊犁哈萨克自治州","640100":"银川市","632700":"玉树藏族自治州"};
}else if(value == "Z"){//首字母 -Z
city_lett =
{"130700":"张家口市","330681":"诸暨市","321100":"镇江市","320582":"张家港市","211300":"朝阳市","430800":"张家界市","410100":"郑州市","370400":"枣庄市","330900":"舟山市","440183":"增城市","440400":"珠海市","411600":"周口市","370300":"淄博市","430200":"株洲市","350600":"漳州市","411700":"驻马店市","440800":"湛江市","520300":"遵义市","510300":"自贡市","530600":"昭通市","441200":"肇庆市","442000":"中山市","620700":"张掖市","512000":"资阳市","640500":"中卫市"};
}
return city_lett;
}
}
</script>
</head>
<body>
<div class="loan_jm1">
<ul>
<li class="loan_jm_l1">
<span class="loan_jm_spa1">所在城市</span>
<span class="wbk_srn select_show select_gr"
id="gr_zone_ids" data-id="130100"></span><b></b>
</li>
</ul>
</div>
<div class="IGN_CITY_CONTAINER" style="z-index: 9999;">
<div class="city"></div>
<div class="IGN_CITY_LETTER"><ul></ul></div>
</div>
<script type="text/javascript">
function showCity(letter){
$(".IGN_CITY_CONTAINER .city .city-list div").hide(); //隐藏所有城市
$("#"+letter+"1_c").show();
}
function AZ(){
var arr = ['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'];
var html = "",cityList="";
for(var i = 0;i<arr.length;i++){
html += "<li><a href=\"javascript:;\">"+arr[i]+"</a></li>";
cityList += "<div class=\"city-list\">";
cityList += "<span class=\"city-letter\"
onclick=\"showCity('"+arr[i]+"')\"
id=\""+arr[i]+"1\">"+arr[i]+"</span>";
cityList += "<div id=\""+arr[i]+"1_c\" >";
$.each(ex.cityList(arr[i]),function(name,value){
cityList += "<p data-id="+name+">"+value+"</p>";
});
cityList += "</div>";
cityList += "</div>";
}
$(".IGN_CITY_LETTER ul").append(html);//添加 城市首字母定位
$(".IGN_CITY_CONTAINER .city").append(cityList);//城市列表
$(".IGN_CITY_CONTAINER .city .city-list div").hide(); //隐藏所有城市
}
AZ();
//加载城市事件
$('body').on('click', '#zone_ids,#gr_zone_ids', function () {
var zid = $(this).attr('id');
$('.IGN_CITY_CONTAINER').show();
});
//选择城市 start
$('body').on('click', '.city-list p', function () {
var type = $('.IGN_CITY_CONTAINER').data('type');
$('#zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));
$('#gr_zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id'));
$('.IGN_CITY_CONTAINER').hide();
});
$('body').on('click', '.IGN_CITY_LETTER a', function () {
var s = $(this).html();
$(window).scrollTop($('#' + s + '1').offset().top);
$(".IGN_CITY_CONTAINER .city .city-list div").hide(); //隐藏所有城市
$("#"+s+"1_c").show();
});
</script>
<!-- <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div> -->
</body>
</html>
h5手机端下拉选择城市的更多相关文章
- 关于h5手机端上拉加载和下拉刷新效果-1
1.手机端目前很火的效果,上拉加载,和下拉刷新.目前主要使用 iscroll 框架来实现.先推荐一个iscroll中文学习的网站,不要感谢,我是雷锋. 2.https://iiunknown.gitb ...
- HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- CSS3不一样的下拉选择框
本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...
- combobox级联检索下拉选择框
1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...
- java、easyui-combotree树形下拉选择框
最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...
- [原] XAF 添加日期筛选下拉选择
1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
随机推荐
- Golang接口(interface)三个特性(译文)
The Laws of Reflection 原文地址 第一次翻译文章,请各路人士多多指教! 类型和接口 因为映射建设在类型的基础之上,首先我们对类型进行全新的介绍. go是一个静态性语言,每个变量都 ...
- entityframework学习笔记--006-表拆分与实体拆分
1.1 拆分实体到多张表 假设你有如下表,如图6-1.Product表用于存储商品的字符类信息,ProductWebInfo用于存储商品的图片,两张表通过SKU关联.现在你想把两张表的信息整合到一个实 ...
- Apache Spark 1.6 Hadoop 2.6 Mac下单机安装配置
一. 下载资料 1. JDK 1.6 + 2. Scala 2.10.4 3. Hadoop 2.6.4 4. Spark 1.6 二.预先安装 1. 安装JDK 2. 安装Scala 2.10.4 ...
- 小程序https Android 安卓可以发request请求,IOS 苹果 发请求失败问题
如果一个机器可以发送成功,一个机器发送失败,那多半是是域名的https支持的问题 那就用腾讯云的这个ssl测试工具检测下 https://www.qcloud.com/product/ssl#user ...
- Android中使用Notification实现普通通知栏（Notification示例一）
Notification是在你的应用常规界面之外展示的消息.当app让系统发送一个消息的时候,消息首先以图表的形式显示在通知栏.要查看消息的详情需要进入通知抽屉(notificationdrawer) ...
- Windows 批处理设置dns ，解决能上qq不能开网页
对于windows 7 @echo off netsh interface ip set dns "本地连接" static 114.114.114.114 primary net ...
- Java线程并发：知识点
Java线程并发:知识点 发布:一个对象是使它能够被当前范围之外的代码所引用: 常见形式:将对象的的引用存储到公共静态域:非私有方法中返回引用:发布内部类实例,包含引用. 逃逸:在对象尚未准备 ...
- Apache启动错误解决方法
xampp启动时显示的错误为: 10:40:18 [Apache] Error: Apache shutdown unexpectedly.10:40:18 [Apache] This may be ...
- 在IT择善培训机构的培训心得
人的一生中都是不断学习来提高 自己,俗话说:“知识是人类不断进步的阶梯”也是“飞向天空的翅膀”. 本人因工作的加入了择善进行学习,能成为择善的学员,不知不觉来到择善1个多月,回想起这1个多 ...
- 【FLUENT案例】06：与EDEM耦合计算
折腾了很久才把耦合模块搞定,用的还是网上别人编译好的UDF,不完美.自己编译的时候,老是提示无法找到fluent中的一些头文件,个人怀疑是操作系统和visual studio的问题,有时间换个系统和V ...