基於MUI 的省市區 選擇器
阿新 • • 發佈：2019-01-07
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>