HTML移动端省市区三级联动，完美适配Android和IOS

共4个文件

js：2个

html：1个

css：1个

三级联动

地区选择

1星需积分: 48 43 浏览量 2018-12-20 10:20:33 上传评论收藏 32KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML省市区三级联动.zip （4个子文件）

移动端省市区三级联动

css

Area.css 4KB

AreaData2.js 172KB

Area.js 15KB

area.html 2KB

<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>城市选择控件</title> <style type="text/css"> * { margin: 0; padding: 0; -webkit-appearance: none; //去掉浏览器默认样式 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; box-sizing: border-box; } html, body { margin: 0 auto; width: 100%; min-height: 100%; overflow-x: hidden; -webkit-user-select: none; } body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; //关闭自动调整字体 -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } input { width: 90%; height: 40px; font-size: 18px; border: 1px solid #b72f20; border-radius: 5px; margin: 20px 5% 0 5%; padding: 5px; } h1 { background-color: #b72f20; color: #fff; font-size: 25px; text-align: center; padding: 10px; } .btn-block{ position: fixed; bottom: 0px; width: 100%; background: red; height: 50px !important } </style> <link rel="stylesheet" href="./css/Area.css"> </head> <body> <div> <div class="content-block"> <input id="demo" type="text" readonly="readonly" onfocus='this.blur();' placeholder="请选择地址" /> <input id="value" type="hidden" /> </div> </div> <script src="./js/AreaData2.js"></script> <script src="./js/Area.js"></script> <script> var area2 = new LArea(); area2.init({ 'trigger': '#demo', 'valueTo': '#value', 'keys': { id: 'value', name: 'text' }, 'type': 2, 'data': [provs_data, citys_data, dists_data] }); </script> </body> </html>

评论收藏

内容反馈