bootstrap下拉框分页_【Bootstrap】 bootstrap-select2下拉菜单插件

这次开发了个小TRS系统，虽然是很小，但是作为初心者，第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件。包括bootstrap-select2，bootstrap-datetimepicker，bootstrap-fileinput等。本文就旨在记录一些这些组件相关的内容

【bootstrap-select2】

官方文档：【https://select2.org/options】

这个组件主要用于优化等页面组件。比如我们想要在下拉菜单的顶部加上一个搜索框支持我们对选项进行搜索，抑或是在多选下拉菜单中我们要有那种类似于tag形式的表现，用这个组件就很好了。首先是这个组件需要在页面中进行引入的文件：

zh-CN.js是语言翻译文件，需要注意引入必须在select2.min.js后面，否则会报错。这一点也适用于绝大多数支持国际化显示的组件。

当然因为是bootstrap的组件，自然是不能少bootstrap的js和css以及支持bootstrap的jquery了，这个就不写出来了。

■　　带静态搜索框的下拉菜单

所谓静态搜索框，就是指这个下拉菜单里所有的option都是在页面渲染时就已经固化好了的，用这个搜索框进行搜索时不会动态发请求到后台去取数据。这个搜索框的HTML可以这么写：

1

2

3

这就是一个普通的select，只不过需要有form-control这个class和一个用于后续表示用的id。

然后在js中这么写：

$('#static_dropdown').select2({

language: 'zh-CN',

width: '100%',

placeholder: '请选择',

minimumInputLength: 10});

利用前端组件一个非常重要的内容就是把握初始化时各个初始化参数的含义。通过对不同参数发出调整来搞出一个符合自己需求的组件。

这里用到的四个参数，language显而易见是国际化显示用的。width指出了这个select的宽度，placeholder就是placeholder...，minimunInputLength指出了在搜索时至少要输入多少字符才会给出响应的搜索结果。如果待选项不是太多的话尽量不要设置过大的值，像示例的10，我觉得是很大的一个值了。。

下面也会零散性地给出一些参数说明：

selectOnClose　　当设置成true时，当收起菜单时的高亮项会自动被选择，如果是false则不会自动选择。

dropdownParent　　可以指定下拉菜单在html代码中的位置。默认情况下，下拉菜单都是被append到body中，并且被设置成position:absolute，且位置在select的下方。而设置这个参数比如dropdownParent: $('#myModal')，就可以将下拉菜单放入一个指定的容器中。

tags　　把tags设置成true了之后，在搜索时即便没有搜索到相关内容，也会把你输入的内容当成一个可选项。之所以被称为tags，就是因为tags这个东西不一定要都是既存的，可以有非既存而我们自己添加的情况。

placeholder　　如果值是一个字符串那么就是一个简单的placeholder，如果换成一个对象也可以，即为菜单添加一个默认的选项。比如placeholder: {id:-1,text:'--请选择--'}

tokenSeparators　　可以设置成一个包含各种字符的列表如[',',' ']，常和tags以及多选菜单配合使用。即自己输入时，输入逗号或空格(看你这个参数设置的情况)时认为是一个tag的终结，就把前面的内容作为一个新tag添加到多选框里面。

createTag　　这个参数的值也是一个函数对象。这个函数接受一个参数param，其结构是这样的