问题描述

mobiscroll 城市级联默认值问题

请问下谁做个mobiscroll自定义控件呢

目前遇到两个问题

第一个：选择省级不点击市级 市级默认初始值，如何让它默认选择省级下第一个市级名称
第二个：选择城市之后 输入框中式正确值但是再点击之后弹出的控件只有省级为选择的，而市级为初始化城市

 var _city;
(function ($) {
    var defaults = {
        label: ['省', '市'],
        areaWheels: 'PC',
        areasKey : ['Provinces', 'Cities']
    };
    $.mobiscroll.presetShort('area');
    $.mobiscroll.presets.area = function (inst) {
        var orig = $.extend({}, inst.settings),
            s = $.extend(inst.settings, defaults, orig),
            wg = [],
            wheels = [],
            ttl;
        var areas = s.areaWheels.split(''),areasKey = s.areasKey;
        for (var i = 0; i < areas.length; i++) {
            genWheels(getAreaInfo(i), s.label[i], i);
        }
        wheels.push(wg);
        function getAreaInfo(index) {
            var area, _p, _c;
            if (areas[index] === "P") {
                area = AddressInfo[areasKey[index]];
            }
            if (areas[index] === "C") {
                if(_city==null || _city==''){
                    _p = wg[0].keys[0];
                    area = AddressInfo[areasKey[index]][_p];
                }else{
                    area = _city;
                }

            }
            return area;
        }

        function genWheels(area, lbl, type, isRet) {
            var values = [], keys = [];
            type = areas[type];
            if (type == "P") {
                for (var i = 0; i < area.length; i++) {
                    values.push(area[i]['_proviceid']);
                    keys.push(area[i]['_provicename']);
                }
            }
            if (type == "C") {
                for (var i = 0; i < area.length; i++) {
                    values.push(area[i]['_cityid']);
                    keys.push(area[i]['_cityname']);
                }
            }
            if (isRet) {
                return {
                    values: keys,
                    keys: values,
                    label: lbl
                };
            }
            console.log("初始化:")
            console.log(wg, values, keys, lbl)
            addWheel(wg, values, keys, lbl);
        }

        function addWheel(wg, k, v, lbl) {
            wg.push({
                values: v,
                keys: k,
                label: lbl
            });
        }
        function getAreasResult(type, value, values){
            type = areas[type];
            var area;
            if (type == "P") {
                area = AddressInfo[areasKey[type]];
                $.each(area, function(val, key){
                    if(val === value){
                        return key;
                    }
                })
            }
            if (type == "C") {
                area = AddressInfo[values[type-1]];
                $.each(area, function(val, key){
                    if(val === value){
                        console.log(key);
                        return key;
                    }
                });
            }
            if (type == "D") {
                area = AddressInfo[values[type-1]];
                $.each(area, function(val, key){
                    if(val === value){
                        return key;
                    }
                });
            }
        }
        return {
            wheels: wheels,
            onBeforeShow: function (wheel, inst) {
                console.log(wheel);
                console.log(inst);
                //console.log(wheel.val.split(" ")[1]);
                var val = wheel.val.split(" ")[0];
                var cities =  AddressInfo.Cities[val];
                var provinces = AddressInfo.Provinces;
                _city = cities;
                //s.wheels = wheels;
            },
            onSelect: function (txt, obj) {
                var pid = obj.values[0];
                var cid = obj.values[1];
                var provinces = AddressInfo.Provinces;
                var cities =  AddressInfo.Cities[pid];
                for(var i in provinces){
                    //console.log(provinces[i]);
                    if(pid == provinces[i]._proviceid){
                        jQuery(this).attr('_ptext', provinces[i]._provicename);
                        break;
                    }
                }
                var ishas = true;
                for(var i in cities){
                    //console.log(cities[i]);
                    if(cid == cities[i]._cityid){
                        jQuery(this).attr('_ctext', cities[i]._cityname);
                        ishas = true;
                        break;
                    }else{
                        ishas = false;
                    }
                }
                if(!ishas){
                    jQuery(this).attr('_ctext', cities[0]._cityname);
                }

            },
            onChange: function (index, val, wheel) {
                clearTimeout(ttl);
                //TODO:当前选择的省市区类型(0:省, 1：市)
                val = val.split(" ")[index];
                if (parseInt(index) >= 0 && index < s.label.length - 1) {
                    var data, idx = parseInt(index) + 1//(1:市， 2:区);
                    ttl = setTimeout(function () {
                        //TODO:要改变的省市区类型
                        data = genWheels(AddressInfo[areasKey[idx]][val], s.label[idx], idx ,true);
                        //设置要改变的省市区数据
                        wheel.setWheels(idx, data);
                        //区
                        if(idx < s.label.length - 1){
                            var next = idx + 1, nextVal = data['keys'][0];
                            data = genWheels(AddressInfo[areasKey[next]][nextVal], s.label[next], next ,true);
                            wheel.setWheels(next, data);
                        }
                        // 切换改变动作
                        wheel.changeWheel([idx, idx+1], 0);
                    }, 500);
                }
            }
        }
    };
    var AddressInfo ={
        "Provinces": [
            {
                "_proviceid": 10060,
                "_provicename": "北京市",
                "_provincecode": "110000",
                "_provincepinyin": "",
                "_zipcode": "",
                "_createuser": "系统",
                "_createtime": "2014-09-17T19:35:19",
                "_status": 2
            },
            {
                "_proviceid": 10061,
                "_provicename": "天津市",
                "_provincecode": "120000",
                "_provincepinyin": "",
                "_zipcode": "",
                "_createuser": "系统",
                "_createtime": "2014-09-17T19:35:19",
                "_status": 2
            }
        ],
        "Cities": {
            "10060": [
                {
                    "_cityid": 10019,
                    "_proviceid": 10060,
                    "_cityname": "北京市",
                    "_citycode": "110100",
                    "_citypinyin": "",
                    "_zipcode": "",
                    "_createuser": "系统",
                    "_createtime": "2014-09-17T19:35:19",
                    "_status": 2
                }
            ],
            "10061": [
                {
                    "_cityid": 10356,
                    "_proviceid": 10061,
                    "_cityname": "天津市",
                    "_citycode": "120100",
                    "_citypinyin": "",
                    "_zipcode": "",
                    "_createuser": "系统",
                    "_createtime": "2014-09-17T19:35:19",
                    "_status": 2
                }
            ]
        }
    }
})(jQuery);

解决方案

这个我做出来了，还需要吗？

解决方案二：

我把这个传到github上了 大家可以去那儿看，有问题在github留言就好了https://github.com/iamgaohui/Mobiscroll-City/

解决方案三：

这个问题搞定了吗，我找到的也是这样的问题