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

所属分类:输入-选择框

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

更新时间:2017/11/28 下午6:20:28

更新说明:添加confirm,cancel事件回调函数返回选中的json,包含拼接好的id和value

返回的json格式如下,具体查看例子中的confirm函数:

{
            ids : "19-0",
            name : "广西壮族自治区-南宁市",
            values : "450000-450100"
 }

更新时间: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

相关插件-选择框

jQuery下拉框多选

下拉字母多选框
  选择框
 14820  38

复选框全选反选取消(界面有点难看,但功能绝对OK)

可实现全选框全选反选取消等,选了可删除。需引用jqueryDOM结构浅显易改。
  选择框
 7828  39

仿淘宝手机网站选择省市县效果

仿淘宝手机网站选择省市县效果
  选择框
 16171  112

jquery各大学选择插件

jquery text选择器点击事件弹出层选择学校value赋值
  选择框
 9117  56

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

    李志旭_zj 0
    2018/1/9 11:13:33

    有bug的作品建议生产环境还是不用的好

        六晓0
        2018/1/9 18:28:11

        可以详细描述下bug吗

    回复
    小目标┾ 0
    2017/12/14 11:14:32

    如何在调用时默认选择自己想选的一个城市呢?,比如我想一进去就选中了浙江省宁波市

        六晓1
        2017/12/18 16:27:19

        1. 参数设置:{idDefault:true,splitStr:'-'}

        2. html里调用的input:value="浙江省-宁波市"

        <input type="text" class="select-value form-control" value="浙江省-宁波市" readonly="readonly">
        $('.select-value').mPicker({
            level: 2,
            idDefault: true,
            splitStr: '-',
            dataJson: city3,
            Linkage: true,
            rows: 6,
            confirm: function(json) {}
        })
    回复
    code001 0
    2017/12/6 17:39:00

    大神,三级联动我想作为时间选择,要怎么改呢?请大神指点

        六晓0
        2017/12/6 20:07:56

        我的思路是用不联动的模式,根据change事件 然后修改相应的json

    回复
    LuoMinQi 0
    2017/12/3 18:01:14

    二级联动这里的head怎么去掉呢?

        六晓1
        2017/12/4 11:49:27

        调用的时候参数加上{header:''},就没有头部了

        $('.select-value3').mPicker({
            level: 2,
            dataJson: 换成你要的银行json,
            header: '',
            confirm: function() {
            }
        })
    回复
    兔子 ??先生 0
    2017/11/29 16:10:44
    大神你用魅族手机测试过了吗?有兼容问题吗
        六晓0
        2017/11/29 16:37:24

        之前1.0的时候测过,现在手上没设备 你有魅族的话可以测试下

    回复
    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/20 15:30:19
        ta de value bu xianshi
        六晓0
        2017/11/20 21:24:58
        显示的是name value值要通过data去获取 看上面的答复
    回复
    驽马 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

    大神收我为徒可好?

    回复
取消回复