UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

仿elementui级联插件(原创)

所属分类：输入-选择框

 17770  111  查看评论 (36)
分享到微信朋友圈
X
仿elementui级联插件(原创) ie兼容12
 查看演示  立即下载

更新时间：2020-10-20 08:16:52

基于jquery，支持键盘操作 数据格式：

var _data = [{
    value: 'shanghai',
    label: '上海',
    children: [{
        value: 'shanghaishi',
        label: '上海市',
        children: [{
            value: 'baoshan1',
            label: '宝山区saa发送飞洒发送'
        }, {
            value: 'fengxian1',
            label: '奉贤区'
        }]
    }]
}];
相关插件-选择框
查看更多

基于swiper模拟移动端下拉框

 需要jquery，基于swiper框架二次开发的移动端下拉选择框。
  选择框
 44426  362

bootstrap下拉列表插件

 bootstrap插件一款基于jquery bootstrap的下拉列表插件 ，有很多样式的下拉框
  选择框
 66420  501

jQuery省市区三级联动插件_城市三级联动插件（原创)

 jQuery省市区三级联动插件_城市三级联动插件
  选择框
 80064  889

Combobox 下拉插件(原创)

 基于 jQueryUI的下拉插件combobox.js
  选择框
 35333  338

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

    ZJW0534 0
    2023/4/12 14:42:45
    风 0
    2023/3/6 16:13:06
    怎么设置选择任意一级选项？ 回复
    Jason 0
    2022/10/13 14:51:20
    默认值，默认值，大佬大佬！！！ 回复
    左手年华 1
    2022/9/24 2:28:44

    我对该级联下拉控件的默认值做了一个简单扩展，代码如下：

    ZdCascader.prototype.getNode = function(id) {
    var ddldata = this.options.data;
    let result = null;
    var resultarr = [];
    var isfinish = false;

    function getTreeItem(data, id) {
        for (var g = 0; g < data.length; g++) {
            //0,1,2
            var item = data[g];
            if (isfinish) {
                return;
            }
            var index = data.map(n => n.value).indexOf(id);
            if (index > -1) {
                isfinish = true;
                resultarr[item.level] = data[index].label;
                break;
            } else {

                resultarr[item.level] = item.label;
                if (item.children) {

                    getTreeItem(item.children, id);
                } else {
                    break;
                }
            }

        }

    }
    getTreeItem(ddldata, id);
    result = resultarr.join(this.options.range);
    this.$el.val(result).focus();
};
        Jason0
        2022/10/13 14:31:01
        咋用啊
    回复
    我就无聊咋的了 0
    2022/8/19 15:14:49
    默认值怎么设置啊
        用户74106514720
        2022/9/22 9:19:31
        同问，我也遇到这个问题了。大神
    回复
    不被作好先生的坏叔叔 0
    2022/6/17 18:14:41
    我这边有做IE浏览器的支持 修改了ZdCascader.css和ZdCascader.js这两个文件，主要是=>这个的修改和格式化字符`这个的处理，这边发不了，博主可以联系下我，看是否要使用并更新
        不被作好先生的坏叔叔0
        2022/6/17 18:15:38
        Q：983379975
        郑雪-昆明奥远科技有限公0
        2022/7/25 10:38:57
        怎么设置默认值
        我就无聊咋的了0
        2022/8/19 15:15:14
        大佬,默认值怎么设置啊
    回复
    空城、旧梦╇ 0
    2022/5/4 13:44:35
    写的啥玩意，一个半成品有啥用，选择完了拿不到value值，也不能设置初始值
        不被作好先生的坏叔叔0
        2022/6/16 16:03:16
        $('#xxx').zdCascader({
    data: _data,
    onChange: function(data1, data2, data3) {
        $("#code").val(data2.value);
        $("#content").val(data2.label);
    }
});
    回复
    ♌ Amber 0
    2021/12/26 11:49:11
    回显赋值加下啊，作者大佬
        郑雪-昆明奥远科技有限公0
        2022/7/25 10:41:25
        有没有解决了，我也遇到了
    回复
    ♌ Amber 0
    2021/12/19 16:32:52
    作者大大，这个支持2-5级的级联吗？ 就是我根据数据来展示我选择几级，少的有两级关联，多的有五级。。支持吗 ？目前只支持3级？
        樱之节0
        2022/8/25 11:53:15
        好像是无限级的
    回复
    YFRon 0
    2021/6/3 15:59:15
    怎么清空选择呢
        家にはガ┼ルフレンドがい0
        2021/11/26 15:23:26

        定义一个对象去接收，然后调用reload方法清空。

        szzz_cascader = $('.tmpl-year [name=szzz]').zdCascader({
        data: [],
        onChange: function(data1, data2,data3) {
            console.log(data1, data2,data3)
        }
    });
szzz_cascader.data().zdCascader.reload([]);

        reload里面的空数据也可以是新的数组，这样就会改变它原本的值

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复