MobileSelect联动插件的使用和遇到的问题总结

mobileSelect.js

很好用的一款级联(联动)插件

使用方法：

1、导js和css：

<link rel="stylesheet" type="text/css"  href="css/mobileSelect.css"/>
<script type="text/javascript" src="js/mobileSelect.js"></script>

2、页面代码：

<p id="wapSelect">请选择所在地区</p>

请选择所在地区

3、js代码：

var wapSelect = new MobileSelect({
    trigger: '#wapSelect',//使用了id选择器
    wheels: [//数据源,需要显示的数据
        {data : numArr}//numArr数据的格式有严格要求，不然没效果
    ],
    callback:function(indexArr, data){//点击选择按钮触发的回调函数,indexArr(选中的选项索引)、data(选中的数据)
        console.log(data);
    } 
});

4、numArr数据格式样例：

[
        {
            "id":"02701000000",
            "value":"光谷·理想城",
            "childs":[
                {
                    "id":"02701010000",
                    "value":"一期",
                    "childs":[
                        {
                            "id":"02701010100",
                            "value":"一栋",
                            "childs":[
                                {
                                    "id":"02701010101",
                                    "value":"一单元"
                                },
                                {
                                    "id":"02701010102",
                                    "value":"二单元"
                                }
                            ]
                        },
                        {
                            "id":"02711111111",
                            "value":"二栋"
                        }
                    ]
                }
            ]
        }
]

后台接口返回的numArr数据格式必须为严格的json数组，属性名称必须为id、value和childs，如另取名，需改源码！

5、实际开发中遇到js加载先后顺序问题

如果请求后台接口后再去加载mobileSelect，numArr的值始终为空，没任何效果。解决方法：

$.ajax({
    data : {},//请求接口传递的参数
    url : "",//接口URL地址
    dataType : 'jsonp',//JSONP格式，跨域请求使用
    jsonp : 'callback',
    success : function(result) {
        numArr = result.data;//先取numArr数据，再加载mobileSelect，实测效果ok
            var wapSelect = new MobileSelect({
                trigger: '#wapSelect',
                wheels: [
                    {data : numArr}
                ],
                callback:function(indexArr, data){
                    console.log(data);
                } 
            }); 
    }
});

我这里用到jquery，需要导jquery的包。