MUI Select the drop-down list style optimization

       MUI app developers have recently discovered mui framework <select> form is not optimized mobile client pop style was not satisfactory, custom css did not show good results. By reading the official documentation was found picker (selector) This component can optimize the mobile terminal style drop-down list specific use are as follows:

1. On the page, to be introduced

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

2. Note that the page mui.min.js not to introduce many times the actual development back repeatedly found that the introduction of lead picker callback function executed multiple times.

These two documents and then write a page function can also have an official document I posted an example of what I wrote function is relatively simple:

//因表单页面是根据后台接口动态生成所以此处需要传递参数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. Use the page to execute the current input tag on it, for example, a click event

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