关于mui选择器的使用

使用mui引入选择器的picker.js。poppicker.js。及他们的css文件之后引入代码与点击确定之后的状态：

document.querySelector('#osex').addEventListener("tap", function() {
      var roadPick = new mui.PopPicker();//获取弹出列表组建，假如是二联则在括号里面加入{layer:2}
                roadPick.setData([{//设置弹出列表的信息，假如是二联，还需要一个children属性
                    value: "1",
                    text: "男"
                }, {
                    value: "2",
                    text: "女"
                }]);
      roadPick.show(function(item) {//弹出列表并在里面写业务代码
       	var itemCallback=roadPick.getSelectedItems();   
         $('#osex .suc-msg').html(itemCallback[0].text);
       });
            });

html为：

 <ul class="msg">
                <li class="msg-li">
                    <span>姓名</span>
                    <input type="text" value="张三" style="border:none" class="msg-w"/>
                </li>
                <li class="msg-li" id="sex">
                    <span>性别</span>
                    <span class="suc-msg">nv</span>
                </li>
                <li class="msg-li" id="address">
                    <span>所在地</span>
                    <span class="suc-msg">fc</span>
                </li>
                <li class="msg-li" id="school">
                    <!--<a href="selSchool.html" class="href">
                    <span>学院信息</span>
                    <a href="selSchool.html" class="suc-msg">dg</a>
                    </a>-->
                    <span>学院信息</span>
                    <span class="suc-msg">gsd</span>
                </li>
                <li class="msg-li" id="major">
                    <!--<a href="selSchool.html" class="href">
                    <span>专业</span>
                    <a href="selSchool.html" class="suc-msg">dg</a>
                    </a>-->
                    <span>专业</span>
                    <span class="suc-msg">gsd</span>
                </li>
                <li class="msg-li" id="grade">
                    <span>年级</span>
                    <span class="suc-msg">gsd</span>
                </li>
                <li class="msg-li" id="oclass">
                    <span>班级</span>
                    <span class="suc-msg">sfd</span>
                </li>
            </ul>
            <!--点击出现的列表-->
            <ul class="mui-table-view" id="sex-sel">
                    <li class="mui-table-view-cell sc">
                        男
                    </li>
                    <li class="mui-table-view-cell sc">
                                                                    女
                    </li>
               </ul>

 

注释：

#osex为点击的元素，即点击后出现选择器开始选择性别，可滑动选择后点击使选择元素出现在相应的内容区即$('#osex .suc-msg).html();

图为成功界面：