jQuery手机端联动滑动选择插件mobile selector

所属分类:输入-选择框

jQuery手机端联动滑动选择插件mobile selector ie兼容10

更新时间:2017/11/13 上午10:51:03

更新说明:优化了index.html里面的例子,因为评论有说不知道怎么取值,添加console输出,更易理解


更新时间:2017/11/7 下午2:14:22

更新说明:原本的二级改为三级和以上渲染,目前例子添加了三级的


mobile selector

参数列表

手机端模拟选择-2级

@param
level [级别:1,2,3]
line [显示行数:默认为3]
height [行高:默认40]
idDefault [是否填充默认值:默认false]
splitStr [分割符号:默认’ ‘(例如:’/’,’-‘,’#’)]
Linkpage [是否联动:默认false]
dataLink [有联动时的数据(有格式)]
data1 [一级数据(Linkpage:false时才有用)]
data2 [二级数据(Linkpage:false时才有用)]
header [头部代码]
afterOne:function(){} [选择一级后回调函数]
afterTwo:function(){} [选择二级后回调函数]
confirm:function(){} [确定回调]
cancel:function(){} [取消回调]
@return deffered{‘show’:fn,’hide’:fn,’updateData’:fn}

组件特色 

1. 除了组件自带需要的样式,需要用户额外编写的css基本没有,除了想修改选择插件每个li的高度。

2. json格式默认为:

var method4=$('.select-value4').selectList({
    level:2,
    data1:level1,
    data2:level2,
    line:5,
    Linkpage:false,
    idDefault:true,
    afterOne:function(result){
        // console.info(result.target.html())
    },
    afterTwo:function(result){
        //console.info(result.target.html())
    },
    confirm:function(){
        method4.updateData([level2,level1]);
        //console.info($('.select-value').data('id1')+'-'+$('.select-value').data('id2')+'-'+$('.select-value').data('id3'));
    }
})

QA:为什么要用这个组件

  1. 除了组件自带需要的样式,需要用户额外编写的css基本没有,除了想修改选择插件每个li的高度。

  2. json格式默认为:

level3=[
    {
        "name": '111',
        "value": '1',
        "child": [
            {
                "name": '222',
                "value": '3',
                "child": [
                    {
                        "name": 'fff',
                        "value": '3'
                    },
                    {
                        "name": 'ggg',
                        "value": '4'
                    },
                    {
                        "name": 'hhh',
                        "value": '5'
                    },
                    {
                        "name": 'yyy',
                        "value": '6'
                    }
                ]
            },
            {
                "name": '555',
                "value": '6',
                "child": [
                    {
                        "name": 'fff',
                        "value": '3'
                    },
                    {
                        "name": 'ggg',
                        "value": '4'
                    },
                    {
                        "name": 'hhh',
                        "value": '5'
                    },
                    {
                        "name": 'yyy',
                        "value": '6'
                    }
                ]
            }
        ]
    },
    {
        "name": 'ddd',
        "value": '2',
        "child": [
            {
                "name": 'fff',
                "value": '3'
            },
            {
                "name": 'ggg',
                "value": '4'
            },
            {
                "name": 'hhh',
                "value": '5'
            },
            {
                "name": 'yyy',
                "value": '6'
            }
        ]
    }
];

3.可修改selector头部代码,增加组件样式灵活性

4.调用组件的元素可以和填充的表单元素不是同一个,如果没设置则默认相同

5.自动填充默认值

6.新增了更新数据的功能,支持动态更新

更多详情请看selector-api.html

相关插件-选择框

下拉框左右选择

双列表下拉框可以左右选择,可以单个选择,可以多个选择
  选择框
 19228  59

jQuery轻量级下拉框插件Dropdown

Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持keyvalue搜索,有token和两种模式。
  选择框
 6270  42

仿招聘网站选择地区、选择行业、选择职位效果

仿招聘网站选择地区、选择行业、选择职位效果
  选择框
 23904  84

jQuery 下拉查询筛选插件Combo Select

Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤,同时支持键盘控制。
  选择框
 28201  69

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币

    belief 0
    2017/11/15 16:49:57

    能否input实时更新数据,比如滚动时更新?

        六晓0
        2017/11/15 17:04:21
        不支持,而且你这个交互上很奇怪,你这种交互的话就要去掉确定取消,因为滚完就选好了。
    回复
    雨田君 0
    2017/11/10 19:36:29

    作者,问一下,怎么取到值返回给后台呢!!新手求解答

        六晓3
        2017/11/13 0:56:01

        1. 如果就是看到的中文,直接

        $('.select-value').val()

        2. 如果你的json的key里面有value值,可以

        $('.select-value').data('value1')+'-'+$('.select-value').data('value2')

        取值,如果可以看例子里的二级里面的调用有.

        2. 如果不带value,可以

        id1=$('.select-value').data('id1');

        拿到序号值,然后用json[id1].cname这种格式拿每一级的值,二级

        id2=$('.select-value').data('id2'),json[id1]child[id2].cname

        去拿。demo的调用都有console的,只是注释了,你可以打开看看

        雨田君0
        2017/11/13 17:03:34

        好的,谢谢回复!!

        六晓0
        2017/11/13 17:59:57

        不客气 例子写的不好 我提交更新了 还没审核 你可以先看github的例子

        雨田君0
        2017/11/16 11:05:43
        好的,另外作者问下,我想用你的单项选择,但不选择城市,改成选择银行,可以更改值吗?
        六晓1
        2017/11/16 17:48:33

        可以,你改一下配置里的dataJson为你要的json就可以。

        $('.select-value3').mPicker({
            level: 1,
            dataJson: 换成你要的银行json,
            Linkage: false,
            rows: 6,
            idDefault: true,
            header: '<div class="mPicker-header">单级选择</div>',
            confirm: function() {
                console.info('选中的value为', $('.select-value3').data('value1'));
            },
            cancel: function() {
                console.info('value为', $('.select-value3').data('value1'));
            }
        })
        六晓0
        2017/11/16 18:00:38

        json格式举例

        var json=[
            {
                "name": "银行1",
                "value": "1"
            },
            {
                "name": "银行2",
                "value": "2"
            },
            {
                "name": "银行3",
                "value": "3"
            }
        ];
    回复
    驽马 0
    2017/11/8 17:42:02

    大神,我用这个插件报错了,不知道什么原因

        六晓0
        2017/11/9 0:11:47

        能不能提供具体的代码,或者报错的提示什么

    回复
    Me碧咸*~~ 0
    2017/10/18 12:25:51

    我的用不了,不知道什么原因

        六晓0
        2017/11/6 0:19:19

        有没有在线demo或者截图?

    回复
    ωǒ 0
    2017/10/17 16:33:36

    大神收我为徒可好?

    回复
    yqh708 0
    2017/9/1 11:27:27

    大神,如果要三级联动的话,要怎么操作呢?

        六晓0
        2017/9/4 17:34:07

        之前代码和业务觉得累赘就去除了 留个邮箱 等我加上直接发你

        味知『素』0
        2017/11/1 10:43:39

        1063218918@qq.com

        六晓0
        2017/11/6 0:18:43

        直接优化为加了无限级的,目前测试了三级,更多的懒得造数据了就没测,有问题欢迎提出

    回复
    轩雨墨潇 0
    2017/8/23 12:58:00
    如何在confirm前进行json的更新呢?
        六晓0
        2017/8/28 17:43:12

        你是在哪一步需要更新数据?如果不是在选择器操作的时候更新,就直接绑定事件比如$('.btn').on('click')函数里改变json,如果是选择器操作时,参考场景看看是否要添加回调函数

        六晓1
        2017/8/28 17:50:39

        目前已有的回调函数是

        afterOne:function(){} [选择一级后回调函数]
        afterTwo:function(){} [选择二级后回调函数]

        用法举例

        dataLink:json,
        afterOne:function(){
            this.container.data('mPicker').updateData(updateJson);
        }
    回复
    Yyqsumer 0
    2017/8/17 14:25:39

    简单方便调用,不错

    回复
取消回复