mobileSelect.js
很好用的一款级联(联动)插件
源码(js、css、demo)GitHub下载地址:
https://github.com/onlyhom/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、页面代码:
<div id="wapSelect">请选择所在地区</div>
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的包。
文末,如果有写的不对地方,欢迎大家纠错,共同进步!