bootstrap 中 SelectPicker 下拉框使用方法实例
Bootstrap 是一个流行的前端框架，它提供了许多实用的组件和插件，SelectPicker 就是其中的一个。SelectPicker 是一个基于 Bootstrap 的下拉框组件，提供了多种选择方式，包括单选、多选、模糊搜索等功能。下面我们将详细介绍 Bootstrap 中 SelectPicker 下拉框的使用方法实例。
一、引入必要的文件
在使用 SelectPicker 之前，我们需要引入必要的文件，包括 Bootstrap 的 CSS 和 JavaScript 文件，以及 SelectPicker 的 CSS 和 JavaScript 文件。具体来说，我们需要引入以下文件：
* bootstrap.css
* bootstrap-select.min.css
* jquery-1.11.3.min.js
* bootstrap.min.js
* bootstrap-select.min.js
二、HTML 结构
下面是一个简单的 HTML 结构，用于展示 SelectPicker 的基本使用方法：
```html
<select id="slpk" class="selectpicker" data-live-search="true" multiple>
<!-- 选项列表 -->
</select>
```
在上面的代码中，我们定义了一个 SelectPicker 组件，id 为 slpk，class 为 selectpicker，data-live-search 属性设置为 true，表示启用模糊搜索功能，multiple 属性设置为 true，表示启用多选功能。
三、JavaScript 代码
下面是一个简单的 JavaScript 代码，用于初始化 SelectPicker 组件：
```javascript
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText: '请选择' // 默认显示内容
});
// 数据赋值
var select = $("#slpk");
select.append("<option value='1'>香蕉</option>");
select.append("<option value='2'>苹果</option>");
select.append("<option value='3'>橘子</option>");
select.append("<option value='4'>石榴</option>");
select.append("<option value='5'>棒棒糖</option>");
select.append("<option value='6'>桃子</option>");
select.append("<option value='7'>陶子</option>");
// 初始化刷新数据
$(window).on('load', function() {
$('.selectpicker').selectpicker('refresh');
});
});
```
在上面的代码中，我们使用 jQuery 选择器选择 SelectPicker 组件，然后使用 selectpicker() 方法初始化组件。我们还可以使用 append() 方法添加选项列表。
四、其他方法
SelectPicker 还提供了一些其他有用的方法，例如获取已选的项、选择指定项等。
* 获取已选的项：
```javascript
var selectedValues = [];
$("#slpk:selected").each(function() {
selectedValues.push($(this).val());
});
```
* 选择指定项（编辑回显使用）：
```javascript
// 单选
$('.selectpicker').selectpicker('val', '列表id');
// 多选
var arr = str.split(',');
$('.selectpicker').selectpicker('val', arr);
```
五、动态加载数据
SelectPicker 还支持动态加载数据，我们可以使用 Ajax 从后台获取数据，然后使用 selectpicker() 方法刷新数据。
```javascript
$(function() {
$(".selectpicker").selectpicker({
noneSelectedText: '请选择'
});
$(window).on('load', function() {
$('.selectpicker').selectpicker('val', '');
$('.selectpicker').selectpicker('refresh');
});
// 下拉数据加载
$.ajax({
type: 'get',
url: basePath + "/lictran/tranStation/loadRoadForTranStationDetail",
dataType: 'json',
success: function(datas) {
var select = $("#slpk");
for (var i = 0; i < datas.length; i++) {
select.append("<option value='" + datas[i].id + "'>" + datas[i].name + "</option>");
}
// 刷新数据
$('.selectpicker').selectpicker('refresh');
}
});
});
```
在上面的代码中，我们使用 Ajax 从后台获取数据，然后使用 selectpicker() 方法刷新数据。
SelectPicker 是一个功能强大且灵活的下拉框组件，它提供了多种选择方式，包括单选、多选、模糊搜索等功能。通过使用 SelectPicker，我们可以轻松地实现复杂的下拉框功能。
