English
资源说明：本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法，Bootstrap Dual列表是一个为响应Twitter优化的列表框插件，它可以用在所有的现代浏览器和触摸设备上，分享给大家，具体如下：
效果图：
一、使用
1、引用css和js文件
<link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<!--<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify
Bootstrap Dual Listbox是一款基于jQuery的插件，专为Bootstrap框架设计，用于实现双向选择列表框功能。这个插件使得用户可以方便地在两个列表之间移动选项，非常适合在需要用户进行多选并分类的情况下使用。以下将详细介绍如何使用和扩展这款插件。
**一、基本使用**
1. **引入资源**：
在HTML文件中，你需要引入Bootstrap的CSS和JS文件，以及Bootstrap Dual Listbox的CSS和JS文件。示例代码如下：
```html
```
如果你想使用预格式化的代码样式，还可以引入Prettify库。
2. **初始化**：
为要转换为双向列表框的`select`元素添加`class="demo1"`。然后在JavaScript中使用以下代码初始化：
```javascript
$(function () {
var demo2 = $('.demo1').bootstrapDualListbox({
nonSelectedListLabel: '未选择',
selectedListLabel: '已选择',
preserveSelectionOnMove: 'moved',
moveOnSelect: false,
nonSelectedFilter: 'ion ([7-9]|[1][0-2])'
});
});
```
这里设置了一些配置项，例如非选中列表的标签、已选列表的标签，以及是否在选择时移动选项等。
3. **HTML代码**：
创建一个`select`元素，并为其指定`multiple`和`size`属性，以及初始化时的`class`属性，如`class="demo1"`。可以预先设置一些选项的`selected`状态。
```html
```
添加一个按钮，点击后可以展示当前选择的值。
**二、扩展功能**
1. **初始化通用函数**：
为了实现更灵活的初始化，你可以创建一个通用的初始化函数，接受参数来定制配置。例如：
```javascript
function initListBox(queryParam1, selectClass, selectedDataStr) {
var paramData = {'testParam1': queryParam1};
// 使用AJAX获取数据，这里仅为示例，实际应用需替换为实际接口
$.ajax({
url: 'DataHandler',
data: paramData,
success: function(data) {
// 假设data是返回的JSON对象，包含预选中的选项
var selectedOptions = data.selected.split(',');
// 获取select元素并初始化
var listbox = $('.' + selectClass).bootstrapDualListbox({
// 设置配置项
// ...
});
// 根据返回的数据设置预选中项
selectedOptions.forEach(function(value) {
listbox.bootstrapDualListbox('select', value);
});
}
});
}
```
该函数接收三个参数：查询参数、`select`元素的类名和预选中项的字符串（以逗号分隔）。
通过以上步骤，你不仅可以实现基本的Bootstrap Dual Listbox功能，还能根据需要进行扩展，比如动态加载数据、设置初始选中项等。这个插件提供了丰富的API和事件，允许开发者进一步定制交互和行为，以满足各种复杂场景的需求。例如，你可以监听`change`事件，当用户选择或取消选择选项时执行某些操作，或者自定义按钮来触发特定功能。Bootstrap Dual Listbox是一个强大且易于使用的工具，可以帮助你在项目中实现高效、美观的多选列表管理。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
