基于MUI 的省市区 选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <meta content="telephone=no" name="format-detection"> 9 <title>城市选择</title> 10 <link rel="stylesheet" type="text/css" href="mui.picker.css"/> 11 <link rel="stylesheet" type="text/css" href="mui.css"/> 12 <style> 13 *{font-size:14px;} 14 p{text-align:center;background:#f00;padding:10px 0;margin:20px 0 0 0; color:#fff} 15 </style> 16 <script src="js/jquery.min.js"></script> 17 </head> 18 <body> 19 <p id="useData">选择时间</p> 20 <input type="text" id="useData_id" /> 21 <p id="city_text">选择省市区</p> 22 <input type="text" id="city_id" /> 23 <p id="city_text1" class="r-tx-txt2 r-tx-txt2s fl">选择省市</p> 24 <input type="text" id="city_id1" /> 25 <p id="city_text2" class="r-tx-txt2 r-tx-txt2s fl">选择省</p> 26 <input type="text" id="city_id2" /> 27 </body> 28 <script src="js/mui.min.js"></script> 29 <script src="js/mui.picker.min.js"></script> 30 <script src="js/data.city.js"></script> 31 <script> 32 //时间选择就不多说了，mui框架自带，重点是城市 33 var start_time_picker = new mui.DtPicker({"type":"date","beginYear":1960,"endYear":2020}); 34 $("#useData").on("tap", function(){ 35 setTimeout(function(){ 36 start_time_picker.show(function(items){ 37 $("#useData_id").val(items.text); 38 $("#useData").html(items.text); 39 }); 40 },200); 41 }); 42 43 //选择省市区 44 var city_picker = new mui.PopPicker({layer:3}); 45 city_picker.setData(init_city_picker); 46 $("#city_text").on("tap", function(){ 47 setTimeout(function(){ 48 city_picker.show(function(items){ 49 $("#city_id").val((items[0] || {}).value + "," + (items[1] || {}).value + "," + (items[2] || {}).value);//该ID为接收城市ID字段 50 $("#city_text").html((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text); 51 }); 52 },200); 53 }); 54 //选择省市 55 var city_picker1 = new mui.PopPicker({layer:2}); 56 city_picker1.setData(init_city_picker); 57 $("#city_text1").on("tap", function(){ 58 setTimeout(function(){ 59 city_picker1.show(function(items){ 60 $("#city_id1").val((items[0] || {}).value + "," + (items[1] || {}).value); 61 $("#city_text1").html((items[0] || {}).text + " " + (items[1] || {}).text); 62 }); 63 },200); 64 }); 65 //选择省 66 var city_picker2 = new mui.PopPicker({layer:1}); 67 city_picker2.setData(init_city_picker); 68 $("#city_text2").on("tap", function(){ 69 setTimeout(function(){ 70 city_picker2.show(function(items){ 71 $("#city_id2").val((items[0] || {}).value); 72 $("#city_text2").html((items[0] || {}).text); 73 }); 74 },200); 75 }); 76 </script> 77 </html>
因为无法上传附件, 外联的 js css, 给链接自己下载 共6个:
http://www.17sucai.com/preview/133044/2017-03-30/%E5%9F%BA%E4%BA%8EmuiH5%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A81/mui.picker.css
http://www.17sucai.com/preview/133044/2017-03-30/%E5%9F%BA%E4%BA%8EmuiH5%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A81/mui.css
http://www.17sucai.com/preview/133044/2017-03-30/%E5%9F%BA%E4%BA%8EmuiH5%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A81/js/jquery.min.js
http://www.17sucai.com/preview/133044/2017-03-30/%E5%9F%BA%E4%BA%8EmuiH5%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A81/js/mui.min.js
http://www.17sucai.com/preview/133044/2017-03-30/%E5%9F%BA%E4%BA%8EmuiH5%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A81/js/mui.picker.min.js
http://www.17sucai.com/preview/133044/2017-03-30/%E5%9F%BA%E4%BA%8EmuiH5%E5%9F%8E%E5%B8%82%E9%80%89%E6%8B%A9%E5%99%A81/js/data.city.js
, 另外 city.data.js 中河南省 从许昌 开始 下面的 区 全部错位, 其它省不知道有没有这种情况,,,请注意......
如果样式有冲突,请删除 mui.css
