使用
官网地址：mui-picker
1. 引用相关资源:
<link rel="stylesheet" href="../airportCart/css/mui.min.css" />
<link rel="stylesheet" href="../../css/mui.picker.min.css" />
<script src="../../js/lib/mui.min.js"></script>
<script src="../../js/lib/mui.picker.min.js"></script>
2. html部分
<!-- 查询所在区域 -->
<div class="innerBorder">
<label class="lable">所在区域：</label>
<div class=" activitySelect item-choose" id="ChoiceSexButton"></div>
</div>
3. js部分 - 实现获取下拉列表的数据
//禁用分享复制等微信功能
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
WeixinJSBridge.call("hideOptionMenu");
});
var rpKey=queryParams("rpKey");
var rKey=queryParams("rKey");
$(function () {
mui.init()
var arr = [];
var sexPicker = new mui.PopPicker({
});
$.ajax({
type: "post",
dataType: "json",
url: www + "/xxx/MerchantList.json",
data: {
"aId": "7",
"cId":"8"
},
async: false,
error: function () {
z.alert("页面加载出错，请刷新页面！");
},
success: function (data) {
if (data.reply.code == 0) {
result = data.reply.result;
for (var i = 0; i < result.length; i++) {
var list = result[i].businessName;
arr.push(list);
}
}
}
});
//初始化popPicker组件
sexPicker.setData(arr);
var ChoiceSexButton = document.getElementById('ChoiceSexButton');
ChoiceSexButton.addEventListener('tap', function(event) {
sexPicker.show(function(items) {
var itemCallback = sexPicker.getSelectedItems();
document.getElementById('ChoiceSexButton').innerHTML = itemCallback[0];
sessionStorage.setItem("businessName",itemCallback[0]);//场景：获取当前所选option数据传给后台[此段代码片段无！]
});
}, false);
});
$("#registBtn").click(async () => {
//活动类型校验
var listOnth = sessionStorage.getItem("businessName")
console.log('listOnth',listOnth)
if(listOnth == undefined || listOnth == null || listOnth == ''){
z.alert("请选择所在区域");
return false;
}
}
4. 问题记录
在ios上input无法聚焦，可以弹出键盘
解决方案
<input style="-webkit-user-select: auto;"/>或者<input style="-webkit-user-select: text ! important;"/>
不过，在我的样式覆盖里不好使，研究其源码发现mui.css有样式冲突，然后直接改了源码就好使了！
<input style="-webkit-user-select: none;"/>
5. 效果
