双向列表框（Dual Listbox）——多选元素管理新方案-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00632/article/details/142117248

双向列表框（Dual Listbox）——多选元素管理新方案

dual-listbox A simple dual listbox build in plain Javascript and some simple styling. (no other libraries of frameworks required) 项目地址: https://gitcode.com/gh_mirrors/du/dual-listbox

1. 项目介绍

双向列表框(Dual Listbox)是由Maykin Media开发的一款JavaScript组件，旨在提供一种更高效的方式来管理多选下拉列表。它允许用户在两个列表之间轻松移动选项，非常适合需要从一组可选项中选择多个项的应用场景。这个项目通过简洁的API和高度定制性，增强了用户体验，支持拖放操作、排序、搜索等功能，并且可以通过监听事件来扩展功能。

2. 快速启动

要开始使用双向列表框，首先你需要将项目添加到你的工程中。以下是如何快速集成的步骤：

安装依赖

如果你使用npm或者Yarn，可以这样安装：

npm install dual-listbox --save
# 或者
yarn add dual-listbox

引入并初始化

在HTML文件中准备一个具有multiple属性的<select>标签，然后通过JavaScript初始化DualListbox。

<select id="example-select" multiple>
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
</select>

<script src="path/to/dual-listbox.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var dualListBox = new DualListbox('example-select');
    });
</script>

3. 应用案例和最佳实践

在实际应用中，DualListbox允许开发者自定义按钮文本、显示或隐藏特定控制按钮以适应不同的UI需求。例如，创建一个拥有完全自定义按钮文本和交互提示的双向列表：

<select class="custom-dual-listbox" multiple>
    <!-- 选项 -->
</select>
<script>
    let customDualListBox = new DualListbox('.custom-dual-listbox', {
        availableTitle: '可用选项',
        selectedTitle: '已选选项',
        addButtonText: '移至右侧',
        removeButtonText: '移回左侧',
        showSortButtons: true,
    });
</script>

最佳实践中，利用事件监听器来增强应用的响应性和用户反馈机制，比如记录选项的添加和移除动作：

customDualListBox.addEventListener('added', function(event) {
    console.log('添加了选项:', event.detail.value);
});
customDualListBox.addEventListener('removed', function(event) {
    console.log('移除了选项:', event.detail.value);
});