mui项目github地址
mui首页官方地址

页面中需导入以下文件：

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/mui.min.css" />
<script src="__PUBLIC__/js/list/mui.min.js"></script>
<!-- 下面两个文件为选择器专用 -->
<script src="__PUBLIC__/js/list/mui.picker.js"></script>
<script src="__PUBLIC__/js/list/mui.poppicker.js"></script>

mui.picker.js和mui.poppicker.js已作为mui单独的插件发布，这是地址

下面是进行地址三级联动选择，或者单级列表选择时的代码示例

更多示例，请下载github上面的项目，在example文件夹中有具体示例代码~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//三级联动
(function($, doc) {
  $.init();
  $.ready(function() {
    //级联示例
    var cityPicker3 = new $.PopPicker({
      layer: 3
    });
    var cityPicker2 = new $.PopPicker({
      layer: 1
    });
    streetData ="",tempArr='';

    var proData ="";
    $.ajax({
      url: ('/main/base/getAddress?' + new Date().getTime()),
      data:{pid:"0"},
      type: "POST",
      dataType:'json',
      async:false,
      success:function(data){
        proData = data;
      }
    });
    cityPicker3.setData(proData);

    var showCityPickerButton = doc.getElementById('showCityPicker3');
    showCityPickerButton.addEventListener('click', function(event) {
      cityPicker3.show(function(items) {
        showCityPickerButton.value =(items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
        tempArr[0] = items[0].id;
        tempArr[1] = items[1].id;
        tempArr[2] = items[2].id;
        showCityPickerButton.dataset.cityid =items[2].id;
        //返回 false 可以阻止选择框的关闭
        if(items[2].id > 0){
          $.ajax({
            url: ('/main/base/getAddress?' + new Date().getTime()),
            data:{pid:items[2].id},
            type: "POST",
            dataType:'json',
            async:false,
            success:function(data){
              //streetData = data;
              cityPicker2.setData(data);
            }
          });
        }
      });
    }, false);
    cityPicker2.setData(streetData);
  });
})(mui, document);

//单级列表
(function($, doc) {
  $.init();
  $.ready(function() {
    //级联示例
    var levelPicker = new $.PopPicker({
      layer: 1
    });

    var aData =[];
    $.ajax({
      url: ('/main/memberCard/getMemberCardLevel?' + new Date().getTime()),
      type: "GET",
      dataType:'json',
      async:false,
      success:function(data){
        if(data.code==1){
          var len = data.data.length;
          for(var i=0; i<len; i++){
            data.data[i].text = data.data[i].name;
          }
          aData = data.data;
        }
      }
    });
    levelPicker.setData(aData);

    var showLevelPickerButton = doc.getElementById('chooseLevel');
    showLevelPickerButton.addEventListener('click', function(event) {
      levelPicker.show(function(items) {
        showLevelPickerButton.value =(items[0] || {}).text;
        showLevelPickerButton.setAttribute("data-id", items[0].id);
        //返回 false 可以阻止选择框的关闭
      });
    }, false);
  });
})(mui, document);