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

所属分类:输入-选择框

 60561  397  查看评论 (95)
分享到微信朋友圈
X
jQuery手机端联动滑动选择插件mobile selector ie兼容10

更新时间:201824 下午4:15:42

更新说明:新增改变json key值的参数,修复行数过少引发的bug,以及更新json出现的选择器消失,只剩阴影层的问题


更新时间: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城市选择插件lazyload-min.js

jquery城市选择插件lazyload-min.js
  选择框
 70122  475

jQuery移动端地区选择插件

这是一个只适用移动端的三级联动插件
  选择框
 34865  320

radio checkbox

利用css3技术,实现替代浏览器自带的radio checkbox功能。不用js技术,纯轻量级的。
  选择框
 30970  312

CheckBox展现不同的状态(原创)

类似qq邮箱选中展现不同的状态,常用功能,简单实用。
  选择框
 22530  284

讨论这个项目(95)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    沉默纪年つ一半是你的影 0
    2020/5/21 17:03:50
    后台处理成例子中的json 格式,前端滑动选择的时候出现undefined 回复
    Only one 0
    2020/4/10 13:54:58
    如何获取选中name里的值 回复
    是我,就是我 0
    2020/1/3 10:16:01
    进入页面直接显示要怎么实现啊
    回复
    我们一直在微笑 0
    2019/11/9 23:40:54
    大佬,我浏览器手机模式使用没问题,手机端使用点击按钮,经常没任何反应
        我们一直在微笑0
        2019/11/10 0:18:14
        我刚手机试了下,好像是底部出现了灰色区域导致的,大佬,怎么处理呢
    回复
    覃鹏飞 0
    2019/8/28 16:54:34
    大佬,我的value默认值可以不写用汉字么,数据是从后台拿的 回复
    nature 0
    2019/7/23 10:37:45
    二级联动有点问题,选中之后几秒钟自动清除了 回复
    码农 0
    2019/5/21 11:37:52
    有没有set的方法呢 创建后 怎么给下拉框绑定到指定的值呢? 回复
    为你倾城殇 0
    2019/2/26 16:55:42
    afterOne和afterTwo这个两个回调方法源码里面没有呢?需要根据第一个选择的数据,得到第二个联动的数据... 回复
    JokER 0
    2019/2/26 10:23:16

    根据confirm返回值

    confirm: function(json) {
        console.info('当前选中json:', json);
        console.info('【json里有带value的情况】');
        $("#cate_id").val(json.values);(
        第一次选择的一级分类有子级, 第二次选择的如果没有子级, 但是会缓存上次选择的子级)
        $("#cate_ids").val(json.name);(
        第一次选择的一级分类有子级, 第二次选择的如果没有子级, 但是会缓存上次选择的子级。 可以根据这个json.name的值来区分是否有子级, 这个没有缓存)
    }
    name: "一级分类|一级分类1"
    values: "5038|5090"
    name: "方便面"
    values: "5068|5090"

    缓存了上次选择的子级,根据name值可以储存、判断本次的选择

    回复
    稀饭 0
    2018/11/6 17:36:14
    Uncaught TypeError: Cannot read property 'style' of undefined
    一直报这个错,请问是什么原因呢?
        六晓0
        2018/11/13 17:44:49
        调试会把 点后面的js看看定位到哪里
        __安然0
        2018/12/3 10:43:52
        什么意思,我也出现了这个问题
        六晓0
        2018/12/28 10:57:26
        请给具体的调用代码,重现方式,浏览器手机类型
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复