<!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>
时间： 2024-10-14 06:00:44