jQuery无限级联动下拉选择插件

所属分类:输入-选择框

 26398  229  查看评论 (8)
分享到微信朋友圈
X
jQuery无限级联动下拉选择插件 ie兼容8

可配置级别的联动下拉选择器

config 属性:

* @ width: 200,  // 宽度,默认自动
* @ height: 32,  // 高度,默认30px
* @ levels: 3,   // 联动级别数量,默认 3级 ,可配置范围 1-n,理论上没有上限
* @ data: data, // 数据源,json格式 ,此数据的层级数需与levels 值相同,否则会出错
* @ levelNames: ['省', '市', '区'], //每个级别的名称,如省市区

数据源格式:

var datas = [{
    "name1": "河北省",
    "id": 2,
    "child": [{
        "name1": "石家庄市",
        "id": 21,
        "child": [{
            "name1": "长安区",
            "id": 211
        }]
    }]
}];
*
*
$('#mulselectbox1').FMulSelect({
    // width: 500,  // 宽度,默认150px
    height: 32, // 高度,默认30px
    levels: 10, // 联动级别数量,默认 3级 ,可配置范围 1-n,理论上没有上限
    data: datas, // 数据源,json格式
    levelNames: ['省', '市', '区', '街道', '小区', '楼号', '单元', '门牌号'], //每个级别的名称,如省市区
    dataKeyNames: { //配置数据源datas的key值, 默认 id  name  child
        "id": "id",
        "name": "name1",
        "childs": "child"
    }
});

取值id    返回 字符串类型 | 分割,1|11|111|1111|11111

$('#mulselectbox1').FMulSelectVal();

取值文本   返回 字符串类型 | 分割, 山东省|烟台市|芝罘区|幸福街道|幸福小区

$('#mulselectbox1').FMulSelectValTxt();

清空

$('#mulselectbox1').FMulSelectClear();

设置值  ['1','11','111','1111']

$('#mulselectbox1').FMulSelectSetVal(ids);
相关插件-选择框

vue选择检索国家页面模板(原创)

vue.js基于json异步调用可选择并且可以通过国家名称和手机区号进行检索相应的国家,并且有中文、日语、英语、越南语、韩语、五种语言,这些语言的显示是根据游览器语言而定。代码比较容易理解,用起来很方便。(支持多语言自适应手机和网站)
  选择框
 24831  271

zTree 下拉插件(原创)

基于zTree实现的下拉树型菜单选择
  选择框
 32081  319

jQuery下拉多选插件ySelect.js

简单实用的jQuery多选插件ySelect.js,支持反选,搜索,分组。
  选择框
 63364  370

移动端城市选择

手机移动端城市选择
  选择框
 58692  495

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

    ?数☆☆D小火柴 0
    2024/3/30 15:31:07
    如何改造执行同一个页面展示多个
    回复
    feidian036 0
    2020/9/15 18:07:05
    居然是个本地样例,无法远程从服务器获取数据,这个比较坑啊,花冤枉钱
        fse95270
        2020/10/30 8:50:08
        会写代码吗小老弟
    回复
    某条街的白日梦 0
    2020/8/7 22:27:20
    不能一个页面同时用两个吗??? 回复
    曾?嬉?的我? 0
    2019/12/10 17:34:11
    怎样才能拿到选中事件? 回复
    路尔轩 0
    2019/11/11 14:48:52
    赞赞赞,写的蛮清楚的 回复
    ........ 0
    2019/8/8 15:24:38
    亲,有点小贵呀! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复