關於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();

圖為成功界面：