【前端】mui從頁面下方彈出下拉列表的樣式

 首先需要引入mui的js和css,可從mui的GitHub示例中搜索copy

這裏就先只放一個mui.poppicker.js的鏈接

// 注：引入的路徑需要自己改一下
<#assign ctx="${requestContext.contextPath}"/>
<link href="${ctx}/static/mui/css/mui.picker.css" rel="stylesheet" />
<link href="${ctx}/static/mui/css/mui.poppicker.css" rel="stylesheet" />
<script src="${ctx}/static/mui/js/mui.picker.js"></script>
<script src="${ctx}/static/mui/js/mui.poppicker.js"></script>

<div id="theList_pregnancyOutcomeDiv" class="mui-input-row">
<label>妊娠結局</label>
<div id='showUserPicker'class="mui-navigate-right"> </div>
<div id='theList_pregnancyOutcome' class="ui-alert" style=" float: right;padding-right:30px;"></div>

js代碼:
  var userPicker = new $.PopPicker();
            userPicker.setData([{
                value: '0',
                text: '尚未分娩 '
            }, {
                value: '1',
                text: '活產（單胎）'
            }, {
                value: '2',
                text: '活產（多胎）'
            }, {
                value: '3',
                text: '其他 '
            }]);
            var showUserPickerButton = doc.getElementById('theList_pregnancyOutcomeDiv');
            showUserPickerButton.addEventListener('tap', function(event) {
                userPicker.show(function(items) {
                    pregnancyOutcomeText.innerHTML = items[0].text;
                     pregnancyOutcome =items[0].value;
                    //返回 false 可以阻止選擇框的關閉
                    //return false;
                });
            }, false);

點擊妊娠結局，會從下面彈出的下拉框：