具体使用方法参考:https://blog.csdn.net/oulihong123/article/details/58327247
不过这插件有一bug,就是若有两下拉是有联动的,会不断产生新的名为“.mobileSelect”的层。.mobileSelect层也没有对应的ID,后经我修改插件源码,为每个.mobileSelect层添加ID,及生成新的.mobileSelect层时,删掉旧的层。
代码如下:
renderWheels: function(wheelsData, cancelBtnText, ensureBtnText,trigger){
var _this = this;
var obj=document.getElementById(trigger+"MobSel")
if(obj){
obj.remove();
}
var cancelText = cancelBtnText ? cancelBtnText : '取消';
var ensureText = ensureBtnText ? ensureBtnText : '确认';
_this.mobileSelect = document.createElement("div");
_this.mobileSelect.className = "mobileSelect";
_this.mobileSelect.id=trigger+"MobSel";
var content='<div ><div class="grayLayer"></div>'+
'<div class="content">'+
'<div class="btnBar">'+
'<div class="fixWidth">'+
'<div class="cancel">'+ cancelText +'</div>'+
'<div class="title"></div>'+
'<div class="ensure" data-id='+trigger+'>'+ ensureText +'</div>'+
'</div>'+
'</div>'+
'<div class="panel">'+
'<div class="fixWidth">'+
'<div class="wheels">'+
'</div>'+
'<div class="selectLine"></div>'+
'<div class="shadowMask"></div>'+
'</div>'+
'</div>'+
'</div></div>';
_this.mobileSelect.innerHTML =content;
document.body.appendChild(_this.mobileSelect);
使用:
共用方法以供调用:
// 下拉选择
function mobileSelect(objId, data, keyMap,position, title, cb) { //参数依次为:下拉对象ID,下拉标题,数据,下拉类型,回调
new MobileSelect({
trigger: '#' + objId,
title: title,
wheels: [
{ data: data }
],
position: position, //初始化定位 打开时默认选中的哪个 如果不填默认为0
keyMap: keyMap?keyMap:{
id: "id",
value: "value",
childs: "childs"
},
callback: function (indexArr, data) {
if (cb) {
cb(indexArr, data)
}
}
})
}
联动使用:
// 初始化报事类型
$.adapter_get({"serviceClassify":varArr.serviceClassify}, 'so/business/service/tree', function (d) {
if (d.status == "base-0001") {
if(d.data.length==0){
d.data=[{id:'', name:'暂无数据'}]
}
var keyMap={
id:'id',
value:'name',
childs:'child',
skillId:"skillId"
}
mobileSelect('serviceTypeId',d.data,keyMap, [0,0,0],"请选择",function(indexArr, data){
if(data[0].id!=''){
$("#serviceTypeIdV").val(JSON.stringify(data));
}
});
}else{
mui.toast(d.msg)
}
getAddressParent(varArr);
})
// 初始化苑街栋
function getAddressParent(varArr){
$.adapter_get("", 'md/project/address/parent/'+varArr.projectId, function (d) {
// console.log(d)
if (d.status == "base-0001") {
if(d.data.length==0){
d.data=[{id:'', name:'暂无数据'}]
}
var keyMap={
id:'id',
value:'name',
childs:'list'
}
// console.log(d.data)
mobileSelect('addressParent',d.data,keyMap, [0,0,0],"请选择",function(indexArr, data){
// $("body").find("#addressChildMobSel").remove()
// $("#machineEquipmentMobSel").remove()
if($("#addressChildV").val() !=""){$("#addressChild").text("请选择");}
if($("#machineEquipmentV").val() !=""){$("#machineEquipment").text("请选择");}
if(data[0].id!=''){
$("#addressParentV").val(JSON.stringify(data));
addressChild(data,varArr)
}
});
}else{
mui.toast(d.msg)
}
})
}
// 初始化单元层房
function addressChild(p,varArr){
var param={
"buildingId":p[2]?p[2].id:"",
"districtId":p[0]?p[0].id:"",
"projectId":varArr.projectId,
"streetId":p[1]?p[1].id:"",
}
$.adapter_post(param, 'md/project/address/child', function (d) {
if (d.status == "base-0001") {
if(d.data.length==0){
d.data=[{id:'', name:'暂无数据'}]
}
var keyMap={
id:'id',
value:'name',
childs:'list'
}
mobileSelect('addressChild',d.data, keyMap, [0,0,0],"请选择",function(indexArr, data){
if(data[0].id!=''){
$("#addressChildV").val(JSON.stringify(data))
}
});
}else{
mui.toast(d.msg)
}
getDevice($("#addressParentV").val(),varArr);
})
}