bootstrap的多选下拉框的使用

前端 专栏收录该内容
0 篇文章 0 订阅

bootstrap的多选下拉框的使用:

     最近,项目中使用到多选下拉框,由于下拉的数据量比较多,因此使用了bootstrap 的multiselect,此框架可以对下来的条目进行查询搜索,可以方便的从众多的选项中刷选出对应的选项。

  首先需要下载bootstrap-multiselect.js和bootstrap-multiselect.css,并将其引入到页面中。使用方法如下:

  $("#faultTypeList").multiselect({
                    maxHeight: 150,//选择框的高度
                    buttonWidth:'50%',//选择框的长度
                    enableFiltering: false,//是否允许搜索,true允许,false不允许
                    nonSelectedText:"-- 请选择 --",//当没有选择时的默认的文字
                    onChange:changeContent//下拉框值发生改变时的事件
                });
 这是简单的用法,至于其他的选项可参见http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html的说明。


bootstrap的双列表下拉框:

    当选择的值过多时,选择框中不能知道自己的选择时,可以使用双列表下拉选择框(bootstrap-duallistbox),使用方式如下:

   var indicatorInfo =  $('#indicatorInfo').bootstrapDualListbox({
            infoText:"共{0}条",
            infoTextEmpty:"选择0条",
            moveOnSelect: false,
            selectorMinimalHeight:180,
            filterTextClear:'全部',
            infoTextFiltered:'<span class="label label-warning">Filtered</span> {0} from {1}',
            preserveSelectionOnMove: 'moved'
        });
        indicatorInfo.bootstrapDualListbox('refresh', true);//重新加载刷新,
效果图如下:


参照文档:http://www.virtuosoft.eu/code/bootstrap-duallistbox/



  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

乔磊_1990

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值