基于bootstrap的双边栏选择框

所属分类:输入-选择框

 54083  366  查看评论 (56)
分享到微信朋友圈
X
基于bootstrap的双边栏选择框 ie兼容8

使用方法

需要引用的JS 

jquery.js, bootstrap.js, doublebox-bootstrap.js

 需要引用的CSS

bootstrap.css, font-awesome.css, doublebox-bootstrap.css

调用接口 

var doubleboxdemo = $('.demo').doublebox({
    nonSelectedListLabel: '选择角色',
    selectedListLabel: '授权用户角色',
    preserveSelectionOnMove: 'moved',
    moveOnSelect: false,
    nonSelectedList: [{
        "roleId": "1",
        "roleName": "zhangsan"
    }, {
        "roleId": "2",
        "roleName": "lisi"
    }, {
        "roleId": "3",
        "roleName": "wangwu"
    }],
    selectedList: [{
        "roleId": "4",
        "roleName": "zhangsan1"
    }, {
        "roleId": "5",
        "roleName": "lisi1"
    }, {
        "roleId": "6",
        "roleName": "wangwu1"
    }],
    optionValue: "roleId",
    optionText: "roleName",
    doubleMove: true,
});
相关插件-选择框

移动端城市选择插件(原创)

基于Vue移动端城市选择插件
  选择框
 30442  327

手机端省市县三级联动

jQuery手机端省市县联动
  选择框
 31737  343

jQuery双列表左右切换选择

左右切换选择,多项选择,并可以回到原始位置而不是向下或向上累加,超出出现滚动条
  选择框
 37859  372

移动端城市搜索选择(原创)

原创,代码简单易修改。类仿大众点评选择城市的部分,只是部分不必要功能没有。有备注!json可修改!
  选择框
 26694  324

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

    壹 壹 ? 0
    2021/12/23 17:14:12
    这个插件现在有一个问题:左边列表数据添加到右边列表的时候,数据不是增加到右边列表最后一行 ,而是根据左边列表的排序插入到右边列表,请问这个问题有人解决了吗 回复
    VampireHunter 0
    2021/5/8 19:37:46
    左侧数据搜索能不能支持异步加载数据 回复
    默为 0
    2019/9/24 16:28:52
    动态数据怎么赋值啊?求大佬给个例子,我自己拼接得不起作用啊,没有数据时那个undefind怎么去掉啊 回复
    如果.微笑 0
    2019/8/20 10:31:19
    Uncaught TypeError: $(...).doublebox is not a function, 有没有人碰到过这个问题
        西瓜0
        2019/8/20 10:37:15
        doublebox-bootstrap.js路径调用错误,会出现这个问题。
        如果.微笑0
        2019/8/20 10:42:12
        嗯,找到了,谢谢
    回复
    东方拓睿 1
    2019/7/22 14:11:01
    var selectedText = new Array();
    var selectedOption = new Array();
    $('select[name="doublebox"]').find("option:not(:selected)").each(function(index, item) {
        selectedText[index] = $(item).text();
        selectedOption[index] = $(item).val();
    });

    这是获取未选中的所有的值

    $('select[name="doublebox"]').find("option:selected").each(function(index, item) {
        selectedText[index] = $(item).text();
        selectedOption[index] = $(item).val();
    });

    这是获取已选中的值 希望对大家有所帮助

    回复
    东方拓睿 0
    2019/7/22 14:07:53
    这个控件不能调整顺序
        壹 壹 ?0
        2021/12/23 17:13:09
        请问你解决排序的问题了吗,左边列表数据添加到右边列表的时候,数据不是增加到最后一行 ,而是根据左边列表的排序插入到右边列表
    回复
    I this garbage 0
    2019/5/23 12:50:23
    写个程序也太不细心了吧,插件里面 selectedList 里面循环里面居然用了options.nonSelectedList[i],我说怎么一直报错
        I this garbage0
        2019/5/23 12:51:21
        额,是我不细心
    回复
    kedan 1
    2019/4/21 14:45:50
    获取字段可以使用自带的getSelectedOptions方法获取,不过里面的结果处理成了字符串,应该删掉join返回所选中的数组才对。
    实时获取可以监听实例的change事件。具体可参考源码(将压缩版拿去排个版就可以了,代码没有混淆加密)。
        哎哟,不错哦0
        2019/5/22 11:21:32
        求一个jq币感谢感谢
    回复
    东方拓睿 0
    2018/11/14 15:33:28
    怎么获取选好的值呢,都没有API的吗
        0
        2019/3/21 11:58:16
        你解决了吗,该如何获取选择的值啊
    回复
    笑靥 0
    2018/10/11 11:59:21
    $("input[name=name]").val() 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复