移动端--下拉选择插件mobileSelect

具体使用方法参考: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);
    })
}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值