小程序picker---级联效果（三级）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_35656188/article/details/79237850

一、WXML

<!-- 部门 -->

< picker bindchange = "bindPickerChange1" value = "{{departIndex}}" range = "{{departArray}}">

< view class = "list clear">

< view class = 'left'> {{departName}} </ view >

< view class = 'right'>

< image mode = "widthFix" src = "/resources/images/task/23.png"></ image >

</ view >

</ view >

</ picker >

<!-- 区域 -->

< picker bindchange = "bindPickerChange2" value = "{{areaIndex}}" range = "{{areaArray}}">

< view class = "list clear">

< view class = 'left'> {{areaName}} </ view >

< view class = 'right'>

< image mode = "widthFix" src = "/resources/images/task/23.png"></ image >

</ view >

</ view >

</ picker >

<!-- 单元 -->

< picker bindchange = "bindPickerChange3" value = "{{unitIndex}}" range = "{{unitArray}}">

< view class = "list clear">

< view class = 'left'> {{unitName}} </ view >

< view class = 'right'>

< image mode = "widthFix" src = "/resources/images/task/23.png"></ image >

</ view >

</ view >

</ picker >

二、WXSS

.list {

width: 100% ;

margin: 30 rpx auto ;

box-sizing: border-box ;

padding: 0px 3% ;

}

.list .left {

width: 88% ;

background-color: #fff ;

height: 80 rpx ;

line-height: 80 rpx ;

padding-left: 18 rpx ;

box-sizing: border-box ;

border-top-left-radius: 20 rpx ;

border-bottom-left-radius: 20 rpx ;

color: #666666 ;

}

.list .right {

width: 12% ;

background-color: #EAEBF1 ;

height: 80 rpx ;

line-height: 90 rpx ;

text-align: center ;

box-sizing: border-box ;

border-top-right-radius: 20 rpx ;

border-bottom-right-radius: 20 rpx ;

}

.list .right image {

width: 30 rpx ;

height: 30 rpx ;

}

三、JS

var app = getApp();

var https = 'https://xrun-5s.com/ashx/ApiService_wqq.ashx' ;

var departmentData = [ "请选择部门" ]; //部门名称

var departmentDatas = [{ ID: 0 , title: '请选择' }]; //部门名称加id

var areaData = [ "请选择区域" ];

var areaDatas = [{ ID: 0 , title: '请选择' }];

var unitData = [ "请选择单元" ];

var unitDatas = [{ ID: 0 , title: '请选择' }];

var staffData = [ "请点击选择" ];

var staffDatas = [{ ID: 0 , title: '请选择' }];

var deIndexStr = 0 ; //选中的部门id

var areaIndexStr = 0 ; //选中的区域id

var unitIndexStr = 0 ; //选中的单元id

var staffIndexStr = 0 ; //选中的巡检人id

var that1;

data: {

departArray: ["请选择部门"],

departIndex: 0 ,

departName: "请选择部门" ,

areaArray: [ "请选择区域" ],

areaIndex: 0 ,

areaName: "请选择区域" ,

unitArray: [ "请选择单元" ],

unitIndex: 0 ,

unitName: "请选择单元"

}

onLoad: function (options) {

departmentData = [ "请选择部门" ];

departmentDatas = [{ ID: 0 , title: '请选择' }];

staffData = [ "请点击选择" ];

staffDatas = [{ ID: 0 , title: '请选择' }];

var that = this ;

that1 = this ;

//加载部门

var param = {

action: "LoadDepartment" ,

CompanyID: wx.getStorageSync( 'CompanyID' )

};

wx.request({

method: 'GET' ,

dataType: "json" ,

header: {

'content-type' : 'application/json' // 默认值

},

data: param,

url: https,

success: function (res) {

if (res.data.Status > 0 ) {

var items = res.data.Data;

for ( var i = 0 ; i < items.length; i++) {

var obj = new Object();

obj = items[i].DepartmentName;

departmentData.push(obj);

var objs = new Object();

objs.ID = items[i].DepartmentID;

objs.title = items[i].DepartmentName;

departmentDatas.push(objs);

}

that.setData({

departArray: departmentData

});

}

}

});

}

bindPickerChange1: function (e) {

console.log( 'picker部门发送选择改变，携带值为' , e.detail.value)

this .setData({

departIndex: e.detail.value

})

this .setData({

departName: this .data.departArray[ this .data.departIndex]

})

for ( var i = 0 ; i < departmentDatas.length; i++) {

if (departmentData[e.detail.value] == departmentDatas[i].title) {

deIndexStr = departmentDatas[i].ID;

}

}

areaIndexStr = 0 ;

unitIndexStr= 0 ;

areaData = [ "请选择区域" ];

areaDatas = [{ ID: 0 , title: '请选择' }];

that1.setData({

areaArray: areaData,

areaName: "请选择区域" ,

areaIndex: 0 ,

unitArray: [ "请选择单元" ],

unitIndex: 0 ,

unitName: "请选择单元"

});

//加载区域

var param = {

action: "LoadArea" ,

CompanyID: wx.getStorageSync( 'CompanyID' ),

DepartmentID: deIndexStr

};

wx.request({

method: 'GET' ,

dataType: "json" ,

header: {

'content-type' : 'application/json' // 默认值

},

data: param,

url: https,

success: function (res) {

//console.log(res);

if (res.data.Status > 0 ) {

var items = res.data.Data;

for ( var i = 0 ; i < items.length; i++) {

var obj = new Object();

obj = items[i].AreaName;

areaData.push(obj);

var objs = new Object();

objs.ID = items[i].AreaID;

objs.title = items[i].AreaName;

areaDatas.push(objs);

}

that1.setData({

areaArray: areaData

});

}

}

})

},

bindPickerChange2: function (e) {

console.log( 'picker区域发送选择改变，携带值为' , e.detail.value)

this .setData({

areaIndex: e.detail.value

});

this .setData({

areaName: this .data.areaArray[ this .data.areaIndex]

});

for ( var i = 0 ; i < areaDatas.length; i++) {

if (areaData[e.detail.value] == areaDatas[i].title) {

areaIndexStr = areaDatas[i].ID;

}

}

unitIndexStr = 0 ;

unitData = [ "请选择单元" ];

unitDatas = [{ ID: 0 , title: '请选择' }];

that1.setData({

unitArray: unitData,

unitIndex: 0 ,

unitName: "请选择单元"

});

//加载单元

var param = {

action: "LoadUnit" ,

AreaID: areaIndexStr

};

wx.request({

method: 'GET' ,

dataType: "json" ,

header: {

'content-type' : 'application/json' // 默认值

},

data: param,

url: https,

success: function (res) {

//console.log(res);

if (res.data.Status > 0 ) {

var items = res.data.Data;

for ( var i = 0 ; i < items.length; i++) {

var obj = new Object();

obj = items[i].UnitName;

unitData.push(obj);

var objs = new Object();

objs.ID = items[i].UnitID;

objs.title = items[i].UnitName;

unitDatas.push(objs);

}

that1.setData({

unitArray: unitData

});

}

}

})

},

bindPickerChange3: function (e) {

console.log( 'picker单元发送选择改变，携带值为' , e.detail.value)

this .setData({

unitIndex: e.detail.value

})

this .setData({

unitName: this .data.unitArray[ this .data.unitIndex]

})

for ( var i = 0 ; i < unitDatas.length; i++) {

if (unitData[e.detail.value] == unitDatas[i].title) {

unitIndexStr = unitDatas[i].ID;

}

}

},

四、效果图