基于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>
基于MUI 的省市区 选择器

猜你喜欢

基于MUI 的省市区选择器
