bootstrap-select下拉选择

这里因为要支持bootstrap 5，所以bootstrap-select使用的是版本是v1.14.0-beta3。

github地址：https://github.com/snapappointments/bootstrap-select

文档地址：[https://www.bootstrapselect.cn/](https://www.bootstrapselect.cn/ "https://www.bootstrapselect.cn/")，该文档地址是以1.13.9版本。

版本默认样式为 `btn-light`，因样式颜色太浅，这个改为 `btn-default`，另将默认的字体图标设定为 `mdi`。

在模板中使用下拉插件也是简单的，在引入插件的 `js` 和 `css` 后，增加一个通用的 `class` 名字，然后 `js` 初始化该插件。

![](/uploads/images/20230107/edd57576cc9f387617beb272755ec919.png)

```html
<select class="form-control selectpicker" name="example-1" id="example-1">
  <option value="1" selected>码奴</option>
  <option value="2">码农</option>
  <option value="3">码匠</option>
  <option value="4">码神</option>
</select>
```
```javascript
$('.selectpicker').selectpicker();
```

你可以将这段js代码放到 `main.min.js` 中，后面使用时，只需给 `select` 增加一个 `selectpicker` 的 `class` 即可。

当你的 `select` 选项非常多的时候，可以 `data-live-search="true"` 设置开启搜索功能。
![](/uploads/images/20230107/e0462ad68841db5d7554bea99be29cdd.png)
```html
<select class="form-control selectpicker" data-live-search="true" name="example-4" id="example-4">
  <option>范特西</option>
  <option>八度空间</option>
  <option>叶惠美</option>
  <option>七里香</option>
  <option data-tokens="夜曲">十一月的肖邦</option>
  <option>依然范特西</option>
  <option>我很忙</option>
</select>
```

其他详细的使用可以查看官方文档，或参考模板中的示例。http://lyear.itshubao.com/v5/lyear_js_select.html

涉及的文件：
- `lyear_js_select.html`
- `js/bootstrap-select/bootstrap-select.css`
- `js/bootstrap-select/bootstrap-select.min.js`
- `js/bootstrap-select/i18n/defaults-zh_CN.min.js`