从我自己的 js 启用 bootrstrap Duellistbox - Javascript

Bootstrap Duellistbox 是 Bootstrap 框架的扩展，提供了双列选择列表的功能。在这篇文章中，我将介绍如何使用自己的 JavaScript 启用 Bootstrap Duellistbox。

前提条件

在开始之前，您需要做以下事情：

• 下载并将 Bootstrap 和 JQuery 添加到您的项目中。
• 下载并将 Bootstrap Duellistbox 添加到您的项目中。

步骤

1. 添加以下 CSS 和 JS 文件到您的 HTML 文件中：

<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="path/to/bootstrap.css">

<!-- Bootstrap Duellistbox stylesheet -->
<link rel="stylesheet" href="path/to/bootstrap-duallistbox.css">

<!-- JQuery script -->
<script src="path/to/jquery.js"></script>

<!-- Bootstrap script -->
<script src="path/to/bootstrap.js"></script>

<!-- Bootstrap Duellistbox script -->
<script src="path/to/bootstrap-duallistbox.js"></script>

2. 在双列选择列表的容器元素中添加以下 HTML 代码：

<select multiple="multiple" size="10" name="duallistbox" class="demo-listbox">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
</select>

3. 在您的 JavaScript 文件中添加以下代码：

$(function() {
    $('.demo-listbox').bootstrapDualListbox({
        nonSelectedListLabel: 'Non-selected',
        selectedListLabel: 'Selected',
        preservSelectionOnMove: 'moved',
        moveOnSelect: false
    });
});

4. 解释一下以上的代码：

首先，我们使用 JQuery 的 $(function() {}) 语法定义了一个匿名函数，在 DOM 加载完成后执行。然后，我们使用 $('.demo-listbox') 查询选择列表元素，并调用 Bootstrap Duellistbox 插件的 bootstrapDualListbox() 方法来启用它。bootstrapDualListbox() 方法的参数是一个对象，包含以下属性：

• nonSelectedListLabel：未选择列表的标签。
• selectedListLabel：已选择列表的标签。
• preserveSelectionOnMove：移动项目时要保留的选择状态（如果值为 'moved' 则只在移动了项目的情况下保留选择状态）。
• moveOnSelect：是否在选择项目时自动移动项目。

5. 运行您的代码，您现在应该可以看到一个双列选择列表。

总结

在本文中，我们介绍了如何使用自己的 JavaScript 启用 Bootstrap Duellistbox。通过使用这个扩展，您可以轻松地添加一个具有交互性的双列选择列表到您的项目中。