h5手机端下拉选择城市

2022-12-18 07:43:49

<!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>

   
</body>
</html>

码农公寓

相关文章