【前端】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);

点击妊娠结局，会从下面弹出的下拉框：