最近MUI app得开发中发现mui框架对<select>表单没有优化 手机端弹出得样式不尽如人意，自定义css也没有展现很好的效果。通过对官方文档得阅读发现了picker（选择器）这个组件可以优化手机端下拉列表样式具体使用方式如下：

1.在页面中要引入

• <script src="../../js/mui.picker.js"></script>
• <script src="../../js/mui.poppicker.js"></script>

2.注意页面中 mui.min.js不要引入多次实际开发中发现引入多次回导致picker回调函数执行多次。

这两个文件再页面中书写函数就可以了 官方文档中也有示例 我贴一下我写的函数比较简单：

//因表单页面是根据后台接口动态生成所以此处需要传递参数key为表单ID，data为下拉列表中所需要展示得数据。
function selectData(key,data){
		var leaveTypeArray=new Array();
		var leaveTypeData=data.split(",");
//此处for循环为拼接picker定义得数据格式例如： picker.setData([{value:'zz',text:'智子'}]); 
		for(var i=0;i<leaveTypeData.length-1;i++){
					var str=leaveTypeData[i];
					var item={value:str,text:str};
					leaveTypeArray.push(item);
		}
		    var picker = new mui.PopPicker();
			picker.setData(leaveTypeArray);
            //这里是回调函数在用户选中后所需要执行得操作
			picker.show(function (selectItems) {
			    picker.setData(leaveTypeArray);
			    $("#"+key).val(selectItems[0].value);
				   
			});
	}

3.页面中使用input标签执行当前点击事件就可以了例如

• <input οnclick="selectData(\''+inputkey+'\',\''+dataStr+'\')"  type="text"  class="mui-input-clear"  readonly="readonly">