bootstrap的多选下拉框的使用

来源：互联网发布：怎么用语法创建数据库编辑：程序博客网时间：2024/06/04 19:55

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