bootstrap的多选下拉框的使用

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/