【前端】mui从页面下方弹出下拉列表的样式

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

这里就先只放一个mui.poppicker.js的链接

// 注：引入的路径需要自己改一下
<#assign ctx="${requestContext.contextPath}"/>

妊娠结局
 


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);

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