MobileSelect作为一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖等等。网上有很多使用教程,这是我觉得比较好的一篇。
但是,今天想在js中根据get请求获取的结果修改MobileSelect中的position,却一直没有找到如何修改,于是在这记录一下MobileSelect在js中可以使用的回调函数。
这是选择器的定义
var keyArr=[{
id: "0",
value: "苹果",
},
{
id: "1",
value: "香蕉",
},
{
id: "2",
value: "草莓",
},
];
var mobileSelect1 = new MobileSelect({
trigger: "#triggerkey",
title: "喜欢吃的水果",
wheels: [{
data: keyArr
}],
position: [0], //初始化定位 打开时默认选中的哪个 如果不填默认为0
});
效果图:
我想使用get请求获取的结果来重定义选择器的初始位置
function getFruit(){
$.ajax({
url: "url", //请求地址
type: "get",
contentType: "application/json;charset=utf-8",
headers: {
"header": "header", //请求头参数
},
data: data//提交参数,
dataType: "text",
success: after_getFruit
});
}
function after_getFruit(str){
var param = JSON.parse(str);
var fruit = param.fruit;
if(fruit == "香蕉"){
mobileSelect1.locatePosition(0, 1);
}else if(fruit == "草莓"){
mobileSelect1.locatePosition(0, 2);
}
}
mobileSelect1.locatePosition(0, 1);
重定义MobileSelect中的初始化定位
其中第一个参数为轮盘索引,第二个参数为轮盘中参数定位
下面介绍其他几个MobileSelect在js中可以使用的回调函数:
函数名 参数 功能
1. show() 无参数 手动显示轮盘组件
2. hide() 无参数 手动隐藏轮盘组件
3. setTitle(str) string 定义MobilSelect标题
4. updateWheel(sliderIndex, data) 参1为要更改的轮盘索引,参2为新的轮盘 重新渲染指定的轮盘
5. updateWheels(data) 参数为新的轮盘 重新渲染所有轮盘
6. getValue() 无参数 获取轮盘组件选择的值