zepto手機觸屏滑動拼音字母城市選擇器代碼



82 326 109



特效描述:zepto 手機觸屏滑動 拼音字母 城市選擇器代碼,zepto手機城市選擇器,簡潔的帶拼音字母查詢的多個城市選擇代碼。

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/city.js"></script>

3. HTML代碼

<!--顯示點擊的是哪一個字母-->
<div id="showLetter" class="showLetter"><span>A</span></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 class="container">
  <div class="city">
    <div class="city-list"><span class="city-letter" id="A1">A</span>
      <p data-id="210300">鞍山市</p>
      <p data-id="152900">阿拉善盟</p>
      <p data-id="340800">安慶市</p>
      <p data-id="410500">安陽市</p>
      <p data-id="542500">阿里地區</p>
      <p data-id="610900">安康市</p>
      <p data-id="520400">安順市</p>
      <p data-id="513200">阿壩藏族羌族自治州</p>
      <p data-id="659002">阿拉爾市</p>
      <p data-id="652900">阿克蘇地區</p>
      <p data-id="820100">澳門特別行政區</p>
      <p data-id="654300">阿勒泰地區</p>
    </div>
    <div class="city-list"><span class="city-letter" id="B1">B</span>
      <p data-id="220800">白城市</p>
      <p data-id="150200">包頭市</p>
      <p data-id="150800">巴彥淖爾市</p>
      <p data-id="130600">保定市</p>
      <p data-id="210500">本溪市</p>
      <p data-id="220600">白山市</p>
      <p data-id="341600">亳州市</p>
      <p data-id="340300">蚌埠市</p>
      <p data-id="371600">濱州市</p>
      <p data-id="620400">白銀市</p>
      <p data-id="610300">寶雞市</p>
      <p data-id="530500">保山市</p>
      <p data-id="469030">白沙黎族自治縣</p>
      <p data-id="451000">百色市</p>
      <p data-id="522401">畢節市</p>
      <p data-id="450500">北海市</p>
      <p data-id="511900">巴中市</p>
      <p data-id="469035">保亭黎族苗族自治縣</p>
      <p data-id="652800">巴音郭楞蒙古自治州</p>
      <p data-id="652700">博爾塔拉蒙古自治州</p>
      <p data-id="110100">北京市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="C1">C</span>
      <p data-id="140400">長治市</p>
      <p data-id="130900">滄州市</p>
      <p data-id="320400">常州市</p>
      <p data-id="330282">慈溪市</p>
      <p data-id="320581">常熟市</p>
      <p data-id="130800">承德市</p>
      <p data-id="150400">赤峰市</p>
      <p data-id="220100">長春市</p>
      <p data-id="431000">郴州市</p>
      <p data-id="430100">長沙市</p>
      <p data-id="341100">滁州市</p>
      <p data-id="430700">常德市</p>
      <p data-id="341400">巢湖市</p>
      <p data-id="341700">池州市</p>
      <p data-id="469027">澄邁縣</p>
      <p data-id="451400">崇左市</p>
      <p data-id="469031">昌江黎族自治縣</p>
      <p data-id="532300">楚雄彝族自治州</p>
      <p data-id="445100">潮州市</p>
      <p data-id="500100">重慶市</p>
      <p data-id="510100">成都市</p>
      <p data-id="542100">昌都地區</p>
      <p data-id="652300">昌吉回族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="D1">D</span>
      <p data-id="232700">大興安嶺地區</p>
      <p data-id="140200">大同市</p>
      <p data-id="230600">大慶市</p>
      <p data-id="321181">丹陽市</p>
      <p data-id="210200">大連市</p>
      <p data-id="210600">丹東市</p>
      <p data-id="370500">東營市</p>
      <p data-id="371400">德州市</p>
      <p data-id="511700">達州市</p>
      <p data-id="532900">大理白族自治州</p>
      <p data-id="469003">儋州市</p>
      <p data-id="469025">定安縣</p>
      <p data-id="533400">迪慶藏族自治州</p>
      <p data-id="510600">德陽市</p>
      <p data-id="469007">東方市</p>
      <p data-id="533100">德宏傣族景頗族自治州</p>
      <p data-id="441900">東莞市</p>
      <p data-id="621100">定西市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="E1">E</span>
      <p data-id="150600">鄂爾多斯市</p>
      <p data-id="420700">鄂州市</p>
      <p data-id="422800">恩施土家族苗族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="F1">F</span>
      <p data-id="210900">阜新市</p>
      <p data-id="210400">撫順市</p>
      <p data-id="350181">福清市</p>
      <p data-id="341200">阜陽市</p>
      <p data-id="370983">肥城市</p>
      <p data-id="361000">撫州市</p>
      <p data-id="350100">福州市</p>
      <p data-id="440600">佛山市</p>
      <p data-id="450600">防城港市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="G1">G</span>
      <p data-id="440100">廣州市</p>
      <p data-id="360700">贛州市</p>
      <p data-id="510800">廣元市</p>
      <p data-id="511600">廣安市</p>
      <p data-id="450300">桂林市</p>
      <p data-id="450800">貴港市</p>
      <p data-id="520100">貴陽市</p>
      <p data-id="513300">甘孜藏族自治州</p>
      <p data-id="623000">甘南藏族自治州</p>
      <p data-id="640400">固原市</p>
      <p data-id="632600">果洛藏族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="H1">H</span>
      <p data-id="231100">黑河市</p>
      <p data-id="211400">葫蘆島市</p>
      <p data-id="330481">海寧市</p>
      <p data-id="320800">淮安市</p>
      <p data-id="131100">衡水市</p>
      <p data-id="150100">呼和浩特市</p>
      <p data-id="330500">湖州市</p>
      <p data-id="230400">鶴崗市</p>
      <p data-id="150700">呼倫貝爾市</p>
      <p data-id="230100">哈爾濱市</p>
      <p data-id="130400">邯鄲市</p>
      <p data-id="330100">杭州市</p>
      <p data-id="410600">鶴壁市</p>
      <p data-id="371700">菏澤市</p>
      <p data-id="420200">黃石市</p>
      <p data-id="431200">懷化市</p>
      <p data-id="340600">淮北市</p>
      <p data-id="421100">黃岡市</p>
      <p data-id="430400">衡陽市</p>
      <p data-id="340100">合肥市</p>
      <p data-id="340400">淮南市</p>
      <p data-id="341000">黃山市</p>
      <p data-id="451200">河池市</p>
      <p data-id="460100">海口市</p>
      <p data-id="441600">河源市</p>
      <p data-id="532500">紅河哈尼族彝族自治州</p>
      <p data-id="441300">惠州市</p>
      <p data-id="610700">漢中市</p>
      <p data-id="451100">賀州市</p>
      <p data-id="632800">海西蒙古族藏族自治州</p>
      <p data-id="632100">海東市</p>
      <p data-id="632300">黃南藏族自治州</p>
      <p data-id="652200">哈密地區</p>
      <p data-id="632200">海北藏族自治州</p>
      <p data-id="653200">和田地區</p>
      <p data-id="632500">海南藏族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="J1">J</span>
      <p data-id="210700">錦州市</p>
      <p data-id="330700">金華市</p>
      <p data-id="140700">晉中市</p>
      <p data-id="320281">江陰市</p>
      <p data-id="220200">吉林市</p>
      <p data-id="230800">佳木斯市</p>
      <p data-id="230300">雞西市</p>
      <p data-id="330400">嘉興市</p>
      <p data-id="140500">晉城市</p>
      <p data-id="350582">晉江市</p>
      <p data-id="370282">即墨市</p>
      <p data-id="360800">吉安市</p>
      <p data-id="370100">濟南市</p>
      <p data-id="420800">荊門市</p>
      <p data-id="410800">焦作市</p>
      <p data-id="370800">濟寧市</p>
      <p data-id="410881">濟源市</p>
      <p data-id="421000">荊州市</p>
      <p data-id="360400">九江市</p>
      <p data-id="360200">景德鎮市</p>
      <p data-id="445200">揭陽市</p>
      <p data-id="620300">金昌市</p>
      <p data-id="440700">江門市</p>
      <p data-id="620200">嘉峪關市</p>
      <p data-id="620900">酒泉市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="K1">K</span>
      <p data-id="320583">昆山市</p>
      <p data-id="410200">開封市</p>
      <p data-id="530100">昆明市</p>
      <p data-id="650200">克拉瑪依市</p>
      <p data-id="653000">克孜勒蘇柯爾克孜自治州</p>
      <p data-id="653100">喀什地區</p>
    </div>
    <div class="city-list"><span class="city-letter" id="L1">L</span>
      <p data-id="141000">臨汾市</p>
      <p data-id="131000">廊坊市</p>
      <p data-id="211000">遼陽市</p>
      <p data-id="220400">遼源市</p>
      <p data-id="141100">呂梁市</p>
      <p data-id="320700">連云港市</p>
      <p data-id="371200">萊蕪市</p>
      <p data-id="411100">漯河市</p>
      <p data-id="331100">麗水市</p>
      <p data-id="341500">六安市</p>
      <p data-id="431300">婁底市</p>
      <p data-id="350800">龍巖市</p>
      <p data-id="370681">龍口市</p>
      <p data-id="371300">臨沂市</p>
      <p data-id="410300">洛陽市</p>
      <p data-id="371500">聊城市</p>
      <p data-id="530700">麗江市</p>
      <p data-id="451300">來賓市</p>
      <p data-id="510500">瀘州市</p>
      <p data-id="530900">臨滄市</p>
      <p data-id="469033">樂東黎族自治縣</p>
      <p data-id="511100">樂山市</p>
      <p data-id="620100">蘭州市</p>
      <p data-id="450200">柳州市</p>
      <p data-id="513400">涼山彝族自治州</p>
      <p data-id="469034">陵水黎族自治縣</p>
      <p data-id="542600">林芝地區</p>
      <p data-id="469028">臨高縣</p>
      <p data-id="540100">拉薩市</p>
      <p data-id="520200">六盤水市</p>
      <p data-id="621200">隴南市</p>
      <p data-id="622900">臨夏回族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="M1">M</span>
      <p data-id="231000">牡丹江市</p>
      <p data-id="340500">馬鞍山市</p>
      <p data-id="510700">綿陽市</p>
      <p data-id="511400">眉山市</p>
      <p data-id="440900">茂名市</p>
      <p data-id="441400">梅州市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="N1">N</span>
      <p data-id="320100">南京市</p>
      <p data-id="330200">寧波市</p>
      <p data-id="320600">南通市</p>
      <p data-id="360100">南昌市</p>
      <p data-id="411300">南陽市</p>
      <p data-id="350700">南平市</p>
      <p data-id="350900">寧德市</p>
      <p data-id="350583">南安市</p>
      <p data-id="542400">那曲地區</p>
      <p data-id="450100">南寧市</p>
      <p data-id="511300">南充市</p>
      <p data-id="511000">內江市</p>
      <p data-id="533300">怒江傈僳族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="P1">P</span>
      <p data-id="211100">盤錦市</p>
      <p data-id="360300">萍鄉市</p>
      <p data-id="410400">平頂山市</p>
      <p data-id="410900">濮陽市</p>
      <p data-id="350300">莆田市</p>
      <p data-id="510400">攀枝花市</p>
      <p data-id="530800">普洱市</p>
      <p data-id="620800">平涼市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="Q1">Q</span>
      <p data-id="130300">秦皇島市</p>
      <p data-id="230200">齊齊哈爾市</p>
      <p data-id="230900">七臺河市</p>
      <p data-id="350500">泉州市</p>
      <p data-id="429005">潛江市</p>
      <p data-id="370200">青島市</p>
      <p data-id="330800">衢州市</p>
      <p data-id="441800">清遠市</p>
      <p data-id="522700">黔南布依族苗族自治州</p>
      <p data-id="450700">欽州市</p>
      <p data-id="530300">曲靖市</p>
      <p data-id="522300">黔西南布依族苗族自治州</p>
      <p data-id="621000">慶陽市</p>
      <p data-id="522600">黔東南苗族侗族自治州</p>
      <p data-id="469002">瓊海市</p>
      <p data-id="469036">瓊中黎族苗族自治縣</p>
    </div>
    <div class="city-list"><span class="city-letter" id="R1">R</span>
      <p data-id="320682">如皋市</p>
      <p data-id="371082">榮成市</p>
      <p data-id="371100">日照市</p>
      <p data-id="542301">日喀則市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="S1">S</span>
      <p data-id="220300">四平市</p>
      <p data-id="231200">綏化市</p>
      <p data-id="220700">松原市</p>
      <p data-id="320500">蘇州市</p>
      <p data-id="310100">上海市</p>
      <p data-id="321300">宿遷市</p>
      <p data-id="330600">紹興市</p>
      <p data-id="140600">朔州市</p>
      <p data-id="230500">雙鴨山市</p>
      <p data-id="210100">沈陽市</p>
      <p data-id="330682">上虞市</p>
      <p data-id="130100">石家莊市</p>
      <p data-id="440500">汕頭市</p>
      <p data-id="350400">三明市</p>
      <p data-id="429021">神農架林區</p>
      <p data-id="361100">上饒市</p>
      <p data-id="411400">商丘市</p>
      <p data-id="421300">隨州市</p>
      <p data-id="341300">宿州市</p>
      <p data-id="411200">三門峽市</p>
      <p data-id="420300">十堰市</p>
      <p data-id="440300">深圳市</p>
      <p data-id="430500">邵陽市</p>
      <p data-id="440200">韶關市</p>
      <p data-id="441500">汕尾市</p>
      <p data-id="510900">遂寧市</p>
      <p data-id="611000">商洛市</p>
      <p data-id="542200">山南地區</p>
      <p data-id="460200">三亞市</p>
      <p data-id="640200">石嘴山市</p>
      <p data-id="659001">石河子市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="T1">T</span>
      <p data-id="140100">太原市</p>
      <p data-id="211200">鐵嶺市</p>
      <p data-id="220500">通化市</p>
      <p data-id="130200">唐山市</p>
      <p data-id="320585">太倉市</p>
      <p data-id="120100">天津市</p>
      <p data-id="321200">泰州市</p>
      <p data-id="150500">通遼市</p>
      <p data-id="331000">臺州市</p>
      <p data-id="370900">泰安市</p>
      <p data-id="429006">天門市</p>
      <p data-id="340700">銅陵市</p>
      <p data-id="522201">銅仁市</p>
      <p data-id="469026">屯昌縣</p>
      <p data-id="610200">銅川市</p>
      <p data-id="620500">天水市</p>
      <p data-id="654200">塔城地區</p>
      <p data-id="659003">圖木舒克市</p>
      <p data-id="652100">吐魯番地區</p>
      <p data-id="710100">臺灣</p>
    </div>
    <div class="city-list"><span class="city-letter" id="W1">W</span>
      <p data-id="330300">溫州市</p>
      <p data-id="320200">無錫市</p>
      <p data-id="150900">烏蘭察布市</p>
      <p data-id="150300">烏海市</p>
      <p data-id="340200">蕪湖市</p>
      <p data-id="420100">武漢市</p>
      <p data-id="370700">濰坊市</p>
      <p data-id="371000">威海市</p>
      <p data-id="469006">萬寧市</p>
      <p data-id="610500">渭南市</p>
      <p data-id="469005">文昌市</p>
      <p data-id="469001">五指山市</p>
      <p data-id="620600">武威市</p>
      <p data-id="450400">梧州市</p>
      <p data-id="532600">文山壯族苗族自治州</p>
      <p data-id="659004">五家渠市</p>
      <p data-id="640300">吳忠市</p>
      <p data-id="650100">烏魯木齊市</p>
    </div>
    <div class="city-list"><span class="city-letter" id="X1">X</span>
      <p data-id="140900">忻州市</p>
      <p data-id="152500">錫林郭勒盟</p>
      <p data-id="130500">邢臺市</p>
      <p data-id="152200">興安盟</p>
      <p data-id="320300">徐州市</p>
      <p data-id="410700">新鄉市</p>
      <p data-id="420600">襄陽市</p>
      <p data-id="360500">新余市</p>
      <p data-id="411500">信陽市</p>
      <p data-id="429004">仙桃市</p>
      <p data-id="411000">許昌市</p>
      <p data-id="430300">湘潭市</p>
      <p data-id="350200">廈門市</p>
      <p data-id="341800">宣城市</p>
      <p data-id="420900">孝感市</p>
      <p data-id="421200">咸寧市</p>
      <p data-id="433100">湘西土家族苗族自治州</p>
      <p data-id="610100">西安市</p>
      <p data-id="610400">咸陽市</p>
      <p data-id="532800">西雙版納傣族自治州</p>
      <p data-id="630100">西寧市</p>
      <p data-id="810100">香港特別行政區</p>
    </div>
    <div class="city-list"><span class="city-letter" id="Y1">Y</span>
      <p data-id="320282">宜興市</p>
      <p data-id="222400">延邊朝鮮族自治州</p>
      <p data-id="321000">揚州市</p>
      <p data-id="140800">運城市</p>
      <p data-id="320900">鹽城市</p>
      <p data-id="140300">陽泉市</p>
      <p data-id="330281">余姚市</p>
      <p data-id="230700">伊春市</p>
      <p data-id="210800">營口市</p>
      <p data-id="370600">煙臺市</p>
      <p data-id="420500">宜昌市</p>
      <p data-id="430600">岳陽市</p>
      <p data-id="360900">宜春市</p>
      <p data-id="430900">益陽市</p>
      <p data-id="330782">義烏市</p>
      <p data-id="360600">鷹潭市</p>
      <p data-id="431100">永州市</p>
      <p data-id="450900">玉林市</p>
      <p data-id="511800">雅安市</p>
      <p data-id="530400">玉溪市</p>
      <p data-id="441700">陽江市</p>
      <p data-id="610800">榆林市</p>
      <p data-id="511500">宜賓市</p>
      <p data-id="445300">云浮市</p>
      <p data-id="610600">延安市</p>
      <p data-id="654000">伊犁哈薩克自治州</p>
      <p data-id="640100">銀川市</p>
      <p data-id="632700">玉樹藏族自治州</p>
    </div>
    <div class="city-list"><span class="city-letter" id="Z1">Z</span>
      <p data-id="130700">張家口市</p>
      <p data-id="330681">諸暨市</p>
      <p data-id="321100">鎮江市</p>
      <p data-id="320582">張家港市</p>
      <p data-id="211300">朝陽市</p>
      <p data-id="430800">張家界市</p>
      <p data-id="410100">鄭州市</p>
      <p data-id="370400">棗莊市</p>
      <p data-id="330900">舟山市</p>
      <p data-id="440183">增城市</p>
      <p data-id="440400">珠海市</p>
      <p data-id="411600">周口市</p>
      <p data-id="370300">淄博市</p>
      <p data-id="430200">株洲市</p>
      <p data-id="350600">漳州市</p>
      <p data-id="411700">駐馬店市</p>
      <p data-id="440800">湛江市</p>
      <p data-id="520300">遵義市</p>
      <p data-id="510300">自貢市</p>
      <p data-id="530600">昭通市</p>
      <p data-id="441200">肇慶市</p>
      <p data-id="442000">中山市</p>
      <p data-id="620700">張掖市</p>
      <p data-id="512000">資陽市</p>
      <p data-id="640500">中衛市</p>
    </div>
  </div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 城市選擇 城市選擇器 多功能 多功能插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表