小程序 3級聯動 簡潔樣式 picker 實現 省市縣等等

view 頁面

<view class="contract">
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class='panel-min'>
            <view class='flex'>
                <view class='panel-title'>所屬社區</view>
                <view class='panel-text-ms'>
                {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}                   </view>
            </view>
            <text class='arrow'></text>
        </view>
    </picker>
</view>

本例子只有一級,二級三級，後面做拼接

{{multiArray[0][values[0]]}} ,{{multiArray[1][values[0]]}},{{multiArray[2][values[0]]}}

2:js

        multiArray:[],//多緯度 一緯[['類1,類2']]  二維 [['類1,類2'],['類1子類1,類1子類2']]
        multiIndex:0,
        column:0,//改變的第幾列
        value:0, //第幾列的第幾個下標
        values:[0,0], //多維選擇的值
        objectMultiArray: [],//多個結果 一緯 二維 [{},{}]

      

         util.post('你的地址', {},function(res){
         if (res.data.executed!=true){
             util.showModel(res.data.message);
             return ;
         }
         that.setData({ hidden: false });
            var list = res.data.pageInfo.list;        // 返回的多維數組
            var multiArray = list.map(item => {　　　　// 此方法將校區名稱區分到一個新數組中
                return item.hpName;
            });
             //multiArray        顯示用
             //objectMultiArray  拿結果用

            that.setData({
                multiArray: [multiArray], //一位數組  二級 格式 multiArray: [multiArray,'']先複製二維的爲空查詢出來了再複製就行
                objectMultiArray: [list,''], //objectMultiArray  把結果存在這個對象裏面
            }) 
            console.log('list', list);
            that.getDoctorGroup();

        })


      //監控選擇
      bindMultiPickerChange:function(e){
        var that = this;
        var value = that.data.value;
        var values = that.data.values;
        var d_value = e.detail.value[0];
        if (value != d_value){
            values[0] = d_value;
            that.setData({
                value: d_value,
                values: values,
             })
            //查詢下級的
            that.getSonData();
        }
      },

     //查詢下級
        var that = this;
        var values = that.data.values;
        var multiArray = that.data.multiArray;
        var objectMultiArray =  that.data.objectMultiArray;
        console.log('multiArray', multiArray);
        console.log('values', values);
        that.setData({ hidden: true });
        util.post('url', {
            id: objectMultiArray[0][values[0]].id,
        },function (res) {
            that.setData({ hidden: false });
            var list = res.data.pageInfo.list;
             var groupName = list.map(item => {　　　　// 此方法將校區名稱區分到一個新數組中
                return item.groupName;
             });
            multiArray[1] = groupName;
            objectMultiArray[1] = list,
            that.setData({
                multiArray: multiArray,
                objectMultiArray: objectMultiArray,
                sonid: list.length > 0 ? list[0].id : 0
            })

        })