光年模板（V5）说明文档
主题
字号
18px

bootstrap-select下拉选择

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

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

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

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

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

<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>
$('.selectpicker').selectpicker();

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

当你的 select 选项非常多的时候，可以 data-live-search="true" 设置开启搜索功能。 

<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上可使用data-tokens用来提高可搜索性-->
  <option>依然范特西</option>
  <option>我很忙</option>
</select>

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

涉及的文件：