mui picker省市区三级联动使用方法（包括设置默认值）

请参考mui 文档http://dev.dcloud.net.cn/mui/ui/#placeholder

mui官方解释：http://dev.dcloud.net.cn/mui/ui/#picker

mui官方demo：http://www.dcloud.io/hellomui/examples/picker.html

1.引入

<script type="text/javascript" src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/mui.picker.min.js"></script>
    <script type="text/javascript" src="js/city.data-3.1.js??ver=20190116"></script>

2.初始化组件

       (function($, doc) {
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //-----------------------------------------
            //					//级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('cityResult3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function(event) {
                console.log(event)
                document.activeElement.blur();
                
                cityPicker3.show(function(items) {
                    console.log(59, items)
                    cityResult3.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    provinceCode=_getParam(items[0], 'value');
                    provinceName= _getParam(items[0], 'text');
                    cityCode=_getParam(items[1], 'value')
                    cityName= _getParam(items[1], 'text');
                    areaCode=_getParam(items[2], 'value')
                    areaName= _getParam(items[2], 'text');
                    //localStorage.setItem("cityNameSearch",cityName);
                    console.log(provinceCode,cityCode)



                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);

 

3.编辑时要设置默认值

如果数据的层级有三层，cityPicker3.pickers将会有三个数组，如果层级为1，那么就是1个数组

cityPicker3.pickers[0].setSelectedIndex[j]

cityPicker3.pickers[1].setSelectedIndex[k]

cityPicker3.pickers[2].setSelectedIndex[n]

    (function($, doc) {
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //-----------------------------------------
            //					//级联示例
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var showCityPickerButton = doc.getElementById('cityResult3');
            var cityResult3 = doc.getElementById('cityResult3');
            showCityPickerButton.addEventListener('tap', function(event) {
                console.log(event)
                document.activeElement.blur();
                if(cityResult3.innerText!=''&&isNotBlank(sessionStorage.getItem("linkinfo"))){
                    var arr=cityData3;
                    var linkinfo=JSON.parse(sessionStorage.getItem("linkinfo"));
                    var a;
                    if(linkinfo.province.indexOf('市')!=-1){
                        var str = linkinfo.province;
                        var reg = new RegExp("市");
                         a = str.replace(reg,"");
                    }else{
                        a = linkinfo.province;
                    }
                    var b=linkinfo.city;
                    var c=linkinfo.district;
                    console.log('省市区信息',linkinfo)
                for(i=0;i<arr.length;i++){
                    if(arr[i].text==a){
                        var kcity=arr[i].children;
                        cityPicker3.pickers[0].setSelectedIndex(i);
                        for(j=0;j<kcity.length;j++){
                            if(kcity[j].text==b){
                                cityPicker3.pickers[1].setSelectedIndex(j);
                                var harea=kcity[j].children;
                                for(n=0;n<harea.length;n++) {
                                    if(harea[n].text==c)
                                        cityPicker3.pickers[2].setSelectedIndex(n);
                                }
                            }
                        }

                    }
                }
                }
                cityPicker3.show(function(items) {
                    console.log(59, items)
                    cityResult3.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
                    provinceCode=_getParam(items[0], 'value');
                    provinceName= _getParam(items[0], 'text');
                    cityCode=_getParam(items[1], 'value')
                    cityName= _getParam(items[1], 'text');
                    areaCode=_getParam(items[2], 'value')
                    areaName= _getParam(items[2], 'text');
                    //localStorage.setItem("cityNameSearch",cityName);
                    console.log(provinceCode,cityCode)



                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);
        });
    })(mui, document);

4.效果