【第三方插件】 layui-select-ext 表单select多选和无限级联动

分享 未结
88 5861
番茄
番茄 2018-5-14
悬赏:20飞吻


layui_extends/selectM.js 多选插件
layui_extends/selectN.js 无限级插件(json数据与layui-tree结构一致)

2.0是一个接近完善的版本。
实现动态设置选中值 set方法
实现自定义提示文字
实现ajax方式获取候选数据
实现禁用某些选项(基于候选数据,status=0)
实现设置下拉框宽度
实现选项搜索(仅支持无限级)
实现表单验证 lay-verify
实现自定义候选数据键名
重置(reset)恢复改为用set方法




使用比较简单,请自行查看演示吧!

码云演示

码云下载
回帖
  • 九义,何汝秀?
    0 回复
  • 番茄
    2018-5-16
    @禾口
    不好意思,水平所限且电脑没有ie8 [吃惊] 暂时无法实现。
    你所说的不支持应该是由于ie8不支持point-events造成操作不顺畅。
    0 回复
  • 番茄
    2018-5-16
    @Drupal猎人 [阴险] 我幼儿园留过级,打过架
    0 回复
  • 番茄
    2018-5-16
    @小Loo 此问题已解决
    0 回复
  • 请问如何在初始化表单后,通过js代码动态选中下拉框的值?
    0 回复
  • flydream
    2018-5-17
    支持 [good]
    0 回复
  • 番茄
    2018-5-17
    @flydream

    //无限级分类-所有配置
    var catIns2 = selectN({
    //元素容器【必填】
    elem: '#cat_ids2'
    //候选数据【必填】
    ,data: catData
    //默认值
    ,selected: [6,10,11]
    });


    不知您是否是这个意思?
    0 回复
  • 番茄
    2018-5-17
    @淘淘乐

    //无限级分类-所有配置
    var catIns2 = selectN({
    //元素容器【必填】
    elem: '#cat_ids2'
    //候选数据【必填】
    ,data: catData
    //默认值
    ,selected: [6,10,11]
    });


    不知您是否是这个意思? [囧] 发帖和下棋一样,举手无回
    0 回复
  • 叼叼叼叼[嘻嘻]
    0 回复
  • 怎么修改里面的联动资料》?
    0 回复
  • 番茄
    2018-5-17
    @做自己的王
    //多选json格式
    var tagData = [{"id":12,"name":"长者"},{"id":13,"name":"工厂"},{"id":14,"name":"小学生"},{"id":15,"name":"大学生"},{"id":16,"name":"研究生"},{"id":17,"name":"教师"},{"id":18,"name":"记者"}];


    //无限级json格式
    var catData = [{"id":1,"name":"周边旅游","children":[{"id":24,"name":"广东","children":[{"id":7,"name":"广州"},{"id":23,"name":"潮州"}]}]},{"id":5,"name":"国内旅游","children":[{"id":8,"name":"华北地区","children":[{"id":9,"name":"北京"}]}]},{"id":6,"name":"出境旅游","children":[{"id":10,"name":"东南亚","children":[{"id":11,"name":"马来西亚","children":[{"id":20,"name":"沙巴","children":[{"id":21,"name":"美人鱼岛","children":[{"id":22,"name":"潜水"}]}]}]}]}]}];


    可以通过 field 自定义键名
    0 回复
  • [good] 完善的挺好的!感觉是这里最棒的下拉多选了[色]
    0 回复
  • 流弊哄哄啦,但是不是select2也可以实现吗
    0 回复
  • @番茄 感谢!昨天尝试用这个方法解决了。后续是否可以支持,在实例化selectN或selectM后动态赋值,而不是使用selectN(options)在初始化的时候就赋值呢?
    0 回复
  • [good] [good] [good] [good] [good] [good]
    0 回复
  • CR
    2018-5-18
    哎,本应该官方实现的东西
    0 回复
  • myui
    2018-5-18
    太好了 加油
    0 回复
  • 阿
    2018-5-19
    多选的数据可以通过ajax获取吗
    0 回复
  • 飞天鼠
    2018-5-19
    [good] [good] [good]
    0 回复
  • 番茄
    2018-5-20
    @
    这就是小小的东西,感觉没必要搞那么复杂。可以像下面这样
        //多选标签-基本配置
    var tagIns1 = selectM({
    //元素容器【必填】
    elem: '#tag_ids1'
    //候选数据【必填】
    ,data: function(){
    var tagsData;
    $.ajax({
    url:'tags.json',
    dataType:'json',
    async:false,
    success:function(json){
    tagsData=json;
    }
    });
    return tagsData;
    }()
    });
    0 回复
  • 哥,你这个多选不支持 select 监听吗
    0 回复
  • 能不能加个 表单校验lay-verify
    0 回复
  • 番茄
    2018-5-21
    @起风了丶 嗯嗯,它本身只是模拟了select的样式,实际上,人家是个input。
    0 回复
  • 番茄
    2018-5-21
    @彼岸的包子 这个应该不难,迟点实现一下。
    0 回复
  • 还有 空值项提示能不能支持多个,比如地区级联 请选择省,请选择市,请选择区
    0 回复
  • 番茄
    2018-5-21
    @彼岸的包子 这个貌似也可以有[可爱]
    0 回复
  • 小乂亲
    2018-5-22
    收藏一下[嘻嘻]
    0 回复
  • @番茄 selectM有set方法吗?
    0 回复
  • @番茄 最好能支持一下获取title,以及根据title赋值
    0 回复
  • 番茄
    2018-5-22
    @淘淘乐 selectM暂时没有此方法,这个模块我觉得有必要进一步优化,等selectN再完善一点,再按照两个模块保持一致性的原则跟进一下。
    0 回复