<!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> <link href="css/style.css" rel="stylesheet" type="text/css"> </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> </li> </ul> </div> <div class="container" style="z-index: 9999; "> <div class="city"> <div class="city-list"><span class="city-letter" id="A1">A</span> <p data-id="340800">安庆市</p> <p data-id="410500">安阳市</p> </div> <div class="city-list"><span class="city-letter" id="B1">B</span> <p data-id="220800">白城市</p> <p data-id="110100">北京市</p> </div> <div class="city-list"><span class="city-letter" id="C1">C</span> <p data-id="320400">常州市</p> <p data-id="330282">慈溪市</p> </div> <div class="city-list"><span class="city-letter" id="D1">D</span> <p data-id="321181">丹阳市</p> <p data-id="210200">大连市</p> </div> <div class="city-list"><span class="city-letter" id="E1">E</span> <p data-id="150600">鄂尔多斯市</p> <p data-id="420700">鄂州市</p> </div> <div class="city-list"><span class="city-letter" id="F1">F</span> <p data-id="210400">抚顺市</p> <p data-id="350181">福清市</p> </div> <div class="city-list"><span class="city-letter" id="G1">G</span> <p data-id="440100">广州市</p> <p data-id="360700">赣州市</p> </div> <div class="city-list"><span class="city-letter" id="H1">H</span> <p data-id="231100">黑河市</p> <p data-id="211400">葫芦岛市</p> </div> <div class="city-list"><span class="city-letter" id="J1">J</span> <p data-id="210700">锦州市</p> <p data-id="330700">金华市</p> </div> <div class="city-list"><span class="city-letter" id="K1">K</span> <p data-id="320583">昆山市</p> <p data-id="410200">开封市</p> </div> <div class="city-list"><span class="city-letter" id="L1">L</span> <p data-id="141000">临汾市</p> <p data-id="131000">廊坊市</p> </div> <div class="city-list"><span class="city-letter" id="M1">M</span> <p data-id="231000">牡丹江市</p> <p data-id="340500">马鞍山市</p> </div> <div class="city-list"><span class="city-letter" id="N1">N</span> <p data-id="320100">南京市</p> <p data-id="330200">宁波市</p> </div> <div class="city-list"><span class="city-letter" id="P1">P</span> <p data-id="211100">盘锦市</p> </div> <div class="city-list"><span class="city-letter" id="Q1">Q</span> <p data-id="130300">秦皇岛市</p> <p data-id="350500">泉州市</p> </div> <div class="city-list"><span class="city-letter" id="R1">R</span> <p data-id="320682">如皋市</p> <p data-id="371082">荣成市</p> </div> <div class="city-list"><span class="city-letter" id="S1">S</span> <p data-id="220300">四平市</p> <p data-id="320500">苏州市</p> </div> <div class="city-list"><span class="city-letter" id="T1">T</span> <p data-id="140100">太原市</p> <p data-id="211200">铁岭市</p> </div> <div class="city-list"><span class="city-letter" id="W1">W</span> <p data-id="330300">温州市</p> <p data-id="340200">芜湖市</p> <p data-id="420100">武汉市</p> </div> <div class="city-list"><span class="city-letter" id="X1">X</span> <p data-id="140900">忻州市</p> <p data-id="152500">锡林郭勒盟</p> </div> <div class="city-list"><span class="city-letter" id="Y1">Y</span> <p data-id="320282">宜兴市</p> <p data-id="222400">延边朝鲜族自治州</p> </div> <div class="city-list"><span class="city-letter" id="Z1">Z</span> <p data-id="130700">张家口市</p> <p data-id="330681">诸暨市</p> </div> </div> <div class="letter"> <ul> <li><a href="javascript:;">A</a></li> <li><a href="javascript:;">B</a></li> <li><a href="javascript:;">C</a></li> <li><a href="javascript:;">D</a></li> <li><a href="javascript:;">E</a></li> <li><a href="javascript:;">F</a></li> <li><a href="javascript:;">G</a></li> <li><a href="javascript:;">H</a></li> <li><a href="javascript:;">J</a></li> <li><a href="javascript:;">K</a></li> <li><a href="javascript:;">L</a></li> <li><a href="javascript:;">M</a></li> <li><a href="javascript:;">N</a></li> <li><a href="javascript:;">P</a></li> <li><a href="javascript:;">Q</a></li> <li><a href="javascript:;">R</a></li> <li><a href="javascript:;">S</a></li> <li><a href="javascript:;">T</a></li> <li><a href="javascript:;">W</a></li> <li><a href="javascript:;">X</a></li> <li><a href="javascript:;">Y</a></li> <li><a href="javascript:;">Z</a></li> </ul> </div> </div> <script type="text/javascript" src="js/zepto.js"></script> <script type="text/javascript"> //加载城市事件 $('body').on('click', '#gr_zone_ids', function () { var zid = $(this).attr('id'); $('.container').show(); }); //选择城市 start $('body').on('click', '.city-list p', function () { var type = $('.container').data('type'); $('#gr_zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id')); $('.container').hide(); }); $('body').on('click', '.letter a', function () { var s = $(this).html(); $(window).scrollTop($('#' + s + '1').offset().top); }); </script> </body> </html>